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>标记附加到iframe，其中包含Main.css的href=""或src=""。

修改

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

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

点击此处的工作示例 - http://jsfiddle.net/ajthomascouk/erEUW/

Answer 2

为什么不首先将它链接到子html？它需要在它的头部声明，所以既然子HTML应该有一个合适的DOM，你也应该把它包含在那个页面中。它真的不会占用你的web服务器，因为浏览器会识别它已经拥有该文件，并且只是访问父HTML时下载的文件。

编辑：好的，在有关此脚本需求的更多信息之后，这里是我编写的脚本的代码示例。这在我的测试环境中有效，我不明白为什么它不会在另一个环境中出现：

<script language="javascript">
    function addCSS () {

        // Connect to Child's DOM
        var ifrm = document.getElementById('childFrame');
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;//alert(ifrm.document.getElementsByTagName("head")[0].innerHTML);

        // Get Child's head
        var docHead = ifrm.document.getElementsByTagName("head")[0].innerHTML;

        // Find all Parent's CSS files
        var cssFiles = document.getElementsByTagName("head")[0].getElementsByTagName("link");
        for (i=0; i<cssFiles.length; i++) {

            if (cssFiles[i].getAttribute("type").toLowerCase() == 'text/css') {

                ifrm.document.getElementsByTagName("head")[0].innerHTML = docHead+'\n<link rel="stylesheet" type="text/css" href="'+cssFiles[i].getAttribute("href")+'" />';

            }

        }

    }
    document.getElementById("childFrame").addEventListener("onload", addCSS());
</script>

注意：

1）此内联脚本需要在创建iframe之后放置。或者，如果可以，您可以向iframe标记本身添加'onload'属性，调用此函数，在这种情况下，需要将此内联JS放在iframe之前。两者之间没有。

2）如果你使用jQuery，这些函数中的许多将更容易/更短。对于那些对JS更熟悉的人来说，很明显我甚至没有使用appendChild（）函数，因为根据我的经验，该函数并不总是能够跨浏览器工作。在这种情况下，我想我可以按照我的方式逃脱它，因为我每次都必须在孩子中创建链接标记，而我现在只是填充一个字符串。

3）显然这document.getElementsByTagName("head")[0].getElementsByTagName("link")有点矫枉过正。但是，这将确保此行只返回标题中的链接标记，而不是从其他任何地方返回...以防父编码的编码器是白痴x）。如果你觉得这种防蛀过度就像过度杀戮一样，你可以改用document.getElementsByTagName("link")。

4）这会将父项中加载的所有CSS文件添加到您的孩子。

5）......我想我忘记了什么，但我不确定是什么......

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

2 个答案: