javascript - 将 CSS 应用于 IFrame 时出现跨浏览器问题

Question

我的 Main.html 文件中有一个 iFrame。我从 iFrame 调用了 child.html。 <iframe src="child.html" id="frame1"></iframe> (这是在 Main.html 文件中)

我需要将 Main.html 的 CSS 应用到 child.html 文件。为此，我使用了 main.html 中的内联 javascript。

代码是:

function ChangeMe() {
        var cssLink = document.createElement("link")
        cssLink.href = "Main.css";
        cssLink.rel = "stylesheet";
        cssLink.type = "text/css";
        frames['frame1'].document.body.appendChild(cssLink);
    }

这仅在 IE 8 中运行良好。我希望它在所有浏览器(FF 4、chrome)上运行。

任何建议!

谢谢

Answer 1

使用 jQuery，尝试以下方法:

如果您使用 <link> :

$('body').append('<link rel=StyleSheet href="'+$("link:contains('Main.css')").attr('href')+'" type="text/css" media=screen />');

如果您使用 <style>

$('body').append('<style src="'+$("style:contains('Main.css')").attr('href')+'" type="text/css" media="screen" />');

我不能 100% 确定语法是否正确，因为我没有机会测试它。但这是一个开始。基本上你想附加一个 <link>或 <style>标记到包含 href="" 的 iframe或 src=""分别是您的 Main.css。

编辑

有机会对此进行编码，您需要以下内容:

$("#myFrame").contents().find("body").append('<style src="'+$("style[src='some.css']").attr('src')+'"></style>

在此处检查工作示例 - http://jsfiddle.net/ajthomascouk/erEUW/