Question

我使用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';
});

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

提前致谢。

Answer 1

您无法使用iframe执行此操作。这将违反域隔离（Same origin policy）并且将是一个巨大的安全漏洞，因为它允许攻击者在加载后修改任意网站的一部分。想象一下，如果我可以在将您的银行网站加载到方便的网站后修改任意表单数据，我该怎么办？ iframe给你！

执行此操作的唯一方法是使用div替换iframe，并使用带有ajax请求的javascript加载内容（只有当其他页面也在您的域上或相应的{{{ 3}}标题已设置）。当然，这需要对两个网站进行大量重组，更重要的是，它需要您获得目标网站的许可，我不认为您这样做。请记住，相同的原始政策正好以防止您尝试做的事情，因此无法绕过它。

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

Answer 2

你不能，这是Same origin policy

的一部分

Answer 3

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

这是为了停止XSS (Cross Site Scripting)

Answer 4

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

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

在主页上创建以下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>

享受:)

Answer 5

通过JavaScript无法做到这一点。

如何在iframe体内容中应用css：Javascript

5 个答案: