3

動的にロードされる iframe があります。この iframe 内のコンテンツは、それが置かれているページと同じスタイルにする必要があります。これを行うために、css ファイルへのリンクを iframe ヘッドに追加しました。Firefox では問題なく動作しますが、IE10 では動作しません。それは既知の問題ですか？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#dialogIframe').load(function(){
                $('#dialogIframe')
                        .contents().find("body")
                        .html("test iframe");
                $('#dialogIframe')
                        .contents().find("head")
                        .html('<link rel="stylesheet" type="text/css" href="/css/main.css">');
            });
        });

    </script>
</head>
<body>
Test
<iframe id="dialogIframe" style="width:300px; height:300px; border: none;">
</iframe>
</body>
</html>

http://jsfiddle.net/YwCRf/

4

2 に答える 2

2

innerHTMLofheadは IE では読み取り専用ですが、以下のスニペットでうまくいきます。

$('#dialogIframe')
    .contents().find("head")
    .append($('<link rel="stylesheet" type="text/css" href="/css/main.css">')
);

誰かが純粋な JavaScript でこれを行う必要がある場合に備えて、コードは次のとおりです。

var doc = document.getElementById('dialogIframe').contentWindow.document,
    sheet = doc.createElement('link');
sheet.rel = 'stylesheet';
sheet.type = 'text/css';
sheet.href = '/css/main.css';
doc.documentElement.appendChild(sheet);
于 2013-08-22T09:15:45.573 に答える