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 回答
1

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

// 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);
于 2013-08-22T09:48:13.523 回答