如何使用 jquery 从本地域覆盖 iFrame 中的 div（html 正文，设置背景）？

Question

我试图从 iFrame 中删除的 CSS（phpbb 中的 colours.css）

html, body {
    color: #536482;
    background: url("../path/to/background.jpg") repeat-x #8fe909;
}

iFrame：

<iframe id="commentframe" scrolling="no" name="commentframe" onload="iframeLoaded()" src="/forum/viewtopic.php?f=13&t=10">

这也包含在一个名为 #commentdiv 的 div 中，只是为了更容易处理 span 区域。这里也是 iframe 加载的，虽然我认为这无关紧要，人们经常要求与正在进行的代码相关的任何内容

<script type="text/javascript">
  function iframeLoaded() {
      var iFrameID = document.getElementById('commentframe');
      if(iFrameID) {
            // here you can make the height, I delete it first, then I make it again
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
      }   
  }
</script>

据我了解，我需要使用 .has() jquery 函数通过在某处指定 CSS 类来完成此任务

.commentsbg {
    background-color: transparent;
    background: transparent;
}

那么 .has 的功能是这样的。

  <script type="text/javascript">
  $("body").has("iframe").addClass('commentsbg');
  </script>

我也试过

  <script type="text/javascript">
  $("commentdiv").has("iframe").addClass('commentsbg');
  </script>

以及在我的 .on('load', function)s 字符串中尝试它们。老实说，我对这些应该去哪里感到非常困惑。 js/jquery 是否进入 CSS 文件（这曾经发生过吗？）... CSS 是否进入 colours.css（iframe 的原始 css 文件）？我对这个很迷茫并且已经做了很长一段时间了。

Answer 1

有几点要评论：

  <script type="text/javascript">
  $("commentdiv").has("iframe").addClass('commentsbg');
  </script>

这里您忘记了 commentDiv 的标识符或类，因此您的函数将不起作用（# 用于 id 和 . 用于类）：

  $("#commentdiv").has("iframe").addClass('commentsbg');

或

$(".commentdiv").has("iframe").addClass('commentsbg')

但是，我认为您没有正确接近您想要实现的目标。您可以直接对您想要的标签进行操作。

之后，CSS 属性应该修改 CSS，因此最好在加载时向您的 <iframe> 添加一个类，并在您的 CSS 中更改它的属性。

你的代码是多余的，有background: transparent和background-color: transparent，最好用：

.commentsbg {
    background-color: transparent !important;
}

但是，您可以直接对 CSS 中的 <iframe> 执行操作，添加 !important 以删除默认样式。

为了简化和总结事情，你应该修改你的 iframe 的背景，首先在你的 CSS 中（如果需要，添加 !important，因为 JavaScript 会加载更多你的网站）。

如果这不起作用，请尝试在需要时添加一个类（例如onload）并修改它的 CSS。