Iframeは親から継承します

を親のスタイルとjavascriptで継承させるにはどうすればよいですか？Iframeは親から継承します

私はそれが<script>タグを取り除き、

var parentHead = $("head", parent.document).html(); 
$("head").html(parentHead);

を試みたが、しています。さらに、私のiframeに影響を与えるスタイルは表示されません。

私が行方不明になっているこれに対するより良い/他のアプローチはありますか？おかげさまで

出典

2011-01-06 Robin Maben

あなたはjavascriptのコードを追加することができた場合、あなたはちょうど私があなたが親の頭の中を探してください要素は 'style'しかし' link'ないと思う適切なのiframe HTML –

あなたはiframe内にこのようなコードを持っていることによって、親のCSSを「継承」することができます

<head> 
<script type="text/javascript"> 
window.onload = function() { 
    if (parent) { 
     var oHead = document.getElementsByTagName("head")[0]; 
     var arrStyleSheets = parent.document.getElementsByTagName("style"); 
     for (var i = 0; i < arrStyleSheets.length; i++) 
      oHead.appendChild(arrStyleSheets[i].cloneNode(true)); 
    } 
} 
</script> 
</head>

はIE、ChromeとFirefoxで私のためにうまく働きました。 JavaScriptを、について

しかし私は、あなたが例えば、親の中からJSを使用するようにどこにでもparent.を追加することができ、直接IFRAMEに親JavaScriptを追加する方法を見つけることができませんでした：

<button type="button" onclick="parent.MyFunc();">Click please</button>

ボタンをクリックすると親ページに定義されたMyFuncという関数が呼び出されます。

出典

2011-01-06 08:54:16

をレンダリングすることができます。 – Bazzz

@Bazzzこれらも同様に追加する必要があります。 –

+19

ドメイン間でこれを行うことはできません。iframeは、子が親のDOMを調べるためにはローカルでなければなりません。 – RET

-1

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

親のスタイルとしてstlye.css？ javascriptについてはわかりませんが、おそらく同じ方法です。

出典

2011-01-06 06:33:00

いつでもすべてのスタイルを文字列に集め、iframeのstyle要素のinnerHTMLとして設定できます。

var selfStyleSheets = document.styleSheets; 
var cssString = []; 
for (var i = 0, count = selfStyleSheets.length; i < count; i++) 
{ 
    var cssRules = selfStyleSheets[i].cssRules; 
    for (var j = 0, countJ = cssRules.length; j < countJ; j++) 
    { 
     cssString.push(cssRules[j].cssText); 
    } 
} 
var styleEl = iframe.contentDocument.createElement('style'); 
styleEl.type = 'text/css'; 
styleEl.innerHTML = cssString.join("\n"); 

iframe.contentDocument.head.appendChild(styleEl);

出典

2013-04-18 15:50:23 Alexey

IE6-8で動作しません（問題がある場合）。また、逆のこと（iframeのスタイルを親に追加する）を行うため、実際には質問に答えません。 – Tobias81

iframeの親（スクリプトではありません）のスタイルを追加するのに最適なソリューションです。 IE6-11、Firefox、Chrome、（古い）Opera、おそらくどこでも動作します。

function importParentStyles() { 
    var parentStyleSheets = parent.document.styleSheets; 
    var cssString = ""; 
    for (var i = 0, count = parentStyleSheets.length; i < count; ++i) { 
     if (parentStyleSheets[i].cssRules) { 
      var cssRules = parentStyleSheets[i].cssRules; 
      for (var j = 0, countJ = cssRules.length; j < countJ; ++j) 
       cssString += cssRules[j].cssText; 
     } 
     else 
      cssString += parentStyleSheets[i].cssText; // IE8 and earlier 
    } 
    var style = document.createElement("style"); 
    style.type = "text/css"; 
    try { 
     style.innerHTML = cssString; 
    } 
    catch (ex) { 
     style.styleSheet.cssText = cssString; // IE8 and earlier 
    } 
    document.getElementsByTagName("head")[0].appendChild(style); 
}

出典

2015-01-29 14:48:32 Tobias81

これは非常に良い答えです。しかし、もしparentが持っていれば、importCssRulesが見つからない。 – joydesigner

これは、キーフレームルールなどのcssTextにアクセスしているときにIEで問題が発生します。「メンバーが見つかりません」というメッセージが表示されます。https://connect.microsoft.com/IE/feedback/details/955703/accessing-csstext-of-a-keyframe-rule-that-contains-a-webkit-property-via- cssom-generated-exception –

同様にangularjsで動作します.... –

Iframeは親から継承します

答えて

関連する問題