How to overwrite a div (html body, sets background) in an iFrame from local domain using jquery?

Question

The CSS I'm trying to remove from the iFrame (colours.css in phpbb)

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

The iFrame:

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

This is also wrapped up in a div named #commentdiv just for easier handling of the span region. Here is also iframe-loaded, though I think it's irrelevant, people often ask for anything related to the code going on

<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>

As I understand it, I need to use the .has() jquery function to achieve this task by specifying a CSS class somewhere

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

Then the .has function something like this.

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

I also tried

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

as well as trying them in my string of .on('load', function)s. Honestly, I'm just very very confused as to where any of this is supposed to go. Does the js/jquery go in the CSS file (does this ever happen?)... And does the CSS go in colours.css (the original css file of the iframe)? I'm so lost on this one and been at it for quite some time.

Answer 1

There's a few things to comment:

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

Here you forgot the identifier or class for your commentDiv , so your function will not work ( # for id and . for classes):

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

or

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

However, I think your are not approaching correctly to what you want to achieve. You can act directly to your desired tag.

Afterwards, CSS properties should modify CSS, so it's better to add a class to your <iframe> when it's loaded if you want and change it's properties in your CSS.

Your code is redundant, with background: transparent and with background-color: transparent , it's better to use:

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

However, you can act directly to your <iframe> in your CSS, adding !important to remove default styles.

To simplify and summary things, you should modify the background of your iframe, firstly in your CSS (adding !important if needed, because JavaScript will load more your website).

If this doesn't work, try adding a class when you need ( onload for example) and modify it's CSS.