javascript - 如何在框架集中的 iframe 中更改 CSS

Question

首先:我不受以下 HTML 构造的影响。我要做的是围绕它构建一个框架。 所以我得到了一个 PHP 文件，包括 HTML 文件，其中包含三个不同框架的框架集。其中只有一个有一个名字:“main”。

如何不向 iframe HTML 添加样式标签，而是向第三个内部框架 HTML 添加样式标签？

我得到的:

在我的外部框架中，我试图添加一个 .css 文件，该文件有效但仅适用于 iframe-HTML:

$(document).ready(function(){
    $('iframe').load( function () {
        var $head = $("iframe").contents().find("head");                
        $head.append($("<link/>", 
            { rel: "stylesheet", href: "/css/test.css", type: "text/css" 
}));
    });
});

只是为了清理一下: PHP OUTSIDE -> 包含一个 iframe -> 带有框架集的 HTML 构造 -> 通过 3 个框架 -> 加载 -> 三个不同的 .html 文件。

所以我得到了:

<iframe>head&body
<frameset>
<frame>head&body</frame>
<frame>head&body</frame>
<frame name="main">head&body</frame>
</frameset>
</iframe>

而且:一切都在同一个域中!

我必须将 test.css 添加到图片底部的框架中。 或者更改图片底部的现有 .css 文件。

Answer 1

感谢您的帮助，但这似乎已经过时了。由于 HTML5 不支持“frameset”和“frame”，我实际上不想要一个明天就无法使用的解决方案。

由于框架集是从第一个 .htm 文件加载的，我将跳过 default.htm 并构建一组加载四个不同 htm 文件的 iframe。

我已经让它工作了，而且 test.css 文件也很有魅力。

下一个优势:因为我现在可以命名 iframe，所以我可以随意移动它们。 我认为这是最好的解决方案。

谢谢你的帮助。