Javascript IE10不支持iframe中的样式表链接_Javascript_Jquery_Html_Internet Explorer 10

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

javascript jquery html

Javascript IE10不支持iframe中的样式表链接,javascript,jquery,html,internet-explorer-10,Javascript,Jquery,Html,Internet Explorer 10,我有iframe，它是动态加载的。此iframe中的内容应设置为其所在页面的样式。为此，我将css文件的链接添加到iframe头部。它在Firefox中工作正常，但在IE10中不工作。这是已知的问题吗 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="/js/jquery.js"></scr

我有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>


$（文档）.ready（函数（）{
$（'#dialogIframe'）.load（函数（）{
$（“#dialogIframe”）
.contents（）.find（“正文”）
.html（“测试iframe”）；
$（“#dialogIframe”）
.contents（）.find（“head”）
.html（“”）；
});
});
试验

head

在IE中是只读的，下面的代码片段起到了作用：

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

我的2美分（更兼容浏览器）

这在IE中不起作用的原因，您可以在上找到。“不起作用”始终是IE:P+1的一个特性，尽管我当然更喜欢该版本。@Kolink我也希望如此，但问题中的代码是jQuery。如果我用纯JS回答，可能会有人对答案投了否决票。你真烂！jQuery不够！XD根据我的经验，我在jQuery问题中发布普通JS得到了更多+1。我有金jQuery徽章，尽管我已经用jQuery写了两个答案。@Kolink，你现在有了。也许你对10万以上的rep有更大的权限，当我回答纯JS到jQuery标记的问题时，我有时会得到反对票。@ValentinaChumak我不确定，但有可能，当IE8触发

$（document.ready（）

时，

iframe.onload

已经触发。如果我能正确回忆起，

$（document）.ready（）

在旧版IEs中不可靠。帖子中没有

name

属性，因此我在回答中使用了

id

。另外，您不需要检查是否可以从

文档

中找到

帧

集合，它在任何浏览器的

窗口

中，也可以在某些浏览器的

文档

中找到它。另外

iframe.document.getElementsByTagName（“head”）[0].appendChild（ss）是一种跨浏览器方法。一个问题：为什么我们要在iframe
的文档中创建link
元素，而不是在放置代码的文档中？iframe数组可以通过id访问。关于“window.frames”，您是对的。我使用了createStyleSheet，因为它是一个本地IE函数（可能更快）。关于链接元素的创建，据我所知没有区别。（createStyleSheet在IE 11中被弃用）这就是为什么我希望尽可能使用Jquery的原因。是的，iframe的情况没有区别，但是如果它是一个弹出窗口，当您尝试从另一个文档中追加元素时，IE中会出现错误。关于链接元素的创建，我认为您必须在要附加它的文档中创建节点。
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);

// 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);