javascript - 如何在 iframe 正文内容 : Javascript 中应用 css

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 加载内容(只有当其他页面也在您的域中或适当的 CORS header 时，您才能这样做)已设置)。当然，这需要对两个网站进行广泛的重组，更重要的是，它需要您获得目标网站的许可，我认为您不会这样做。 请记住，同源策略正是用来防止您尝试做的事情，所以没有办法绕过它。

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