将外部样式表链接到 iframe 中的页面答案

【问题标题】：Linking external stylesheet to the page within an iframe将外部样式表链接到 iframe 中的页面
【发布时间】：2013-11-08 20:20:48
【问题描述】：

我已经检查了很多其他问题，但仍然没有运气。

我正在使用 chrome 处理我的本地计算机。

我有welcome.html（主页）和test.html（iframe页面）然后我就有了我的 style.css。

目标：将我的 test.html 作为一个 iframe 放在我的 welcome.html 页面中。但是使用 jQuery 设置 iframe (test.html) 的样式。

所以我的welcome.html中有这个

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

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

然后在body标签里面

<iframe name='iframe' id="iframe" src="test.html"></iframe>

iframe 正在工作，但当我检查 iframe 时没有附加任何样式。

【问题讨论】：

我认为您的代码不起作用，因为jquery 无法访问另一个页面标题，我认为您应该使用 ajax 来做-不确定-
可能重复：stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
我正在本地开发 @PatrickM 该线程没有解决我的问题。
你用什么开发的？只是在网络浏览器中打开文件？你有服务器在运行吗？你的目标是什么浏览器？最简单的解决方案（也是唯一始终有效的解决方案）就是将样式表添加到test.html。任何更复杂的事情都将取决于实现细节 - 让 javascript 在 iFrames 上工作很复杂并且存在安全风险，因此浏览器有各种防范措施。
只是本地没有服务器。

标签： html css iframe local

【解决方案1】：

我假设您不能直接编辑 iframe 源？最简单的解决方案是在此处添加<link> 标签。

但是，您真正的问题可能是它找不到 css 文件。 <link> 标签中的src 属性需要相对于 iframe 的位置。如果 iframe 在其他域上，您将需要一个绝对路径（在您的情况下可能是 "http://localhost/whatever/style.css"）。

【讨论】：

所有这些都在我本地机器上的同一个文件夹中。