如何在 iframe 正文内容中应用 css：Javascript答案

【问题标题】：How to apply css in iframe body content : Javascript如何在 iframe 正文内容中应用 css：Javascript
【发布时间】：2018-01-17 14:27:23
【问题描述】：

我使用 iframe 进行这样的一些计算。

<iframe id="iframe1" src="https://www.investwell.in/updation/parameter/Calculator/par_retirement_calculatorN.jsp?obgl=eeeeee&amp;fs=14&amp;ol=222222&amp;obgr=dddddddd&amp;or=111111&amp;share=N" width="100%" height="900" frameborder="0" scrolling="auto"></iframe>

现在，我想使用 Javascript 将 css 应用到 iframe 内容，但我无法做到这一点。

JS：

$('iframe').load( function() {
    $('iframe').contents().find("head")
  .append($("<style type='text/css'>  .panel-body{background: red !important;}  </style>"));#000000';
});

谁能告诉我这里哪里出错了？任何帮助将不胜感激。

提前致谢。

【问题讨论】：

iframe 内容来自外部域，因此您无法通过 JS 更改其任何内容（CSS 或其他）。

标签： javascript jquery html css iframe

【解决方案1】：

你不能用 iframe 做到这一点。这将违反域隔离 (Same origin policy) 并且将是一个巨大的安全漏洞，因为它允许攻击者在加载任意网站后修改它的一部分。想象一下，如果我可以在为您“方便”的 iframe 中加载您的银行网站后修改任意表单数据，我能做什么！

这样做的唯一方法是用 div 替换 iframe，并通过 ajax 请求通过 javascript 加载内容（只有当其他页面也在您的域中或适当的 @987654322 时才能执行此操作@ 标头已设置）。当然，这需要对两个网站进行大量重组，更重要的是，它需要您获得目标网站的许可，我认为您不会这样做。请记住，完全采用了相同的来源政策，以防止您尝试做的事情，所以没有办法绕过它。

我建议你找到另一种方法来做你想做的任何事情。

【讨论】：

【解决方案2】：

你不能，这是Same origin policy的一部分

【讨论】：

【解决方案3】：

除非您有直接访问权限并因此拥有源 html 和/或 css 文件的所有权，否则您无法更改 iframe 中显示的页面样式。

这是停止XSS (Cross Site Scripting)

【讨论】：

【解决方案4】：

您可以为 iframe 内容应用 CSS。请按照以下步骤操作。

根据您的要求创建样式表。

在主页面创建下面的JavaScript函数。

       function myFunc() {
       var iframe = document.getElementById('iframe');
       var style = document.createElement('link');
       style.href = "CSS.css";
       style.rel = "stylesheet";
       style.type = "text/css";
       iframe.contentDocument.head.appendChild(style);
       }

在 iframe 的 onload 事件中调用 JavaScript 函数，如下所示。
```
   <iframe id="iframe"  src="test.html" width="100%"></iframe>
```
享受:)

【讨论】：

【解决方案5】：

通过 JavaScript 无法做到这一点。

【讨论】：

我认为反之亦然，您可以通过仅使用 JavaScript 而不仅仅是 css 将样式应用于 iFrame
@javaEegen.. 但如何？你能给我一个答案吗？