如何在框架集中的 iframe 中更改 CSS答案

【问题标题】：How to alter CSS in an iframe in a frameset如何在框架集中的 iframe 中更改 CSS
【发布时间】：2018-06-11 13:58:29
【问题描述】：

首先：我不受以下 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 个 -frames -> 加载 -> 三个不同的 .html 文件。

所以我得到了：

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

而且：这一切都在一个域上！

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

【问题讨论】：

请也发布 HTML。
ifame 内容是否来自您的域？如果不是，您可能无能为力
试试$head.append('<link rel="stylesheet" href="/css/test.css" type="text/css">'); 看看是否可行。
你有<frame>s 或<iframe>s 还是两者都有？
@Pete 是正确的，如果您尝试这样注入，您可能会遇到大量跨域问题

标签： javascript jquery html css iframe

【解决方案1】：

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

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

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

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

感谢您的帮助。

【讨论】：