I have an iframe and I want to set it's border to zero.

But I want to do this from inside the iframe, using javascript or jQuery.

How to do this? Many thanks in advance,

I have an iframe and I want to set it's border to zero.

But I want to do this from inside the iframe, using javascript or jQuery.

How to do this? Many thanks in advance,

• javascript
• jquery
• html

• 4 Will the document containing it be on the same origin? Because if not, you'll hit the SOP, since to remove the border on the iframe you have to modify the containing document (at least, as far as I know). – T.J. Crowder Commented Jul 25, 2012 at 11:56
• 1 thanks for the advice. They're on different domains ;( – Eamorr Commented Jul 25, 2012 at 12:02
• @ Eamorr: Ah, well, then my answer below is right, just not very useful to you. :-) – T.J. Crowder Commented Jul 25, 2012 at 12:06

3 Answers 3

If the parent is on a different origin, you can't do it, because access to the parent's content is forbidden by the Same Origin Policy.

If the parent document is on the same origin, this should do it:

(function() {
  var frames = window.parent.document.getElementsByTagName("iframe"),
      index,
      frame;

  for (index = 0; index < frames.length; ++index) {
    frame = frames[index];
    if (frame.contentWindow == window) {
      frame.frameBorder = "none";
    }
  }
})();

Live example | source of parent | source of frame

Note that it's important to use == rather than === when paring the window properties (unusually, window is special).

You can do it by $(parent.document).find('#myIframe').css('border', 'xxxx'); - But as pointed out by the ment above, both the pages (main one as well as the one shown in the iframe) should be in the same domain - otherwise you'll end up with a security exception because of same origin policy.

Alternatively you can use parent.$

parent.$("iframe").prop("frameborder", 0); // This will change all iframes
parent.$("#IframeID").prop("frameborder", 0); // This will change single iframe