如何通过 jQuery 在 iframe 中更改/添加 CSS

vin*_*eet 2 html javascript css iframe jquery

我想使用 jQuery 在 iframe div 中添加 css 属性,但它不起作用。

Html 代码:-

<html>
    <body>
      <iframe id='iframeId' src='api.php?abc=xyz..'>
        <html>
          <head></head>
          <body>
            <div class='change-class'> //require <div class='change-class' style='background-color:black'>
              .......

            </div>

          </body>
        </html>
      </iframe>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

JS代码:-

我尝试下面的代码,但没有得到任何结果。

$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');
Run Code Online (Sandbox Code Playgroud)

Jai*_*Jai 5

为此,iframe src 文档也必须在同一个域中才能访问 iframe 的 dom 节点,如果两个页面都在同一个域中,则可以执行以下操作:

$("#iframeId").contents().find(".change-class").css('background-color', 'black');
Run Code Online (Sandbox Code Playgroud)

  • 问题...不应该是`.css()`而不是`.attr()`...吗? (4认同)
  • 如果两个文件都在同一个域中,那么他为什么要通过 javascript 添加 css。他应该将 css 直接添加到 iframe 内部。 (3认同)
  • @chotesah 那么由于安全原因,这是不可能的。只能访问相同域的页面。 (2认同)