我有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>
答案 0 :(得分:2)
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);
答案 1 :(得分: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);