Question

我有iframe，它是动态加载的。此iframe中的内容应设置为与其所在页面相同的样式。为此，我添加了到iframe头的css文件的链接。它在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/

Answer 1

head的{{3}}在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);

Answer 2

我的两分钱（更多浏览器兼容）

// locate iframe
var frameName = "dialogIframe"; 
var iframe    = document.frames ? document.frames[frameName] : window.frames[frameName];

// create stylesheet    
var ss  = iframe.document.createElement("link");
ss.type = "text/css";
ss.rel  = "stylesheet";
ss.href = "style.css";

// apply to iframe's head
document.all ? iframe.document.createStyleSheet(ss.href) : iframe.document.getElementsByTagName("head")[0].appendChild(ss);

IE10不支持iframe中的样式表链接

2 个答案: