jQuery/Javascript: set border of iframe from inside iframe

Question

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,

Answer 1

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 comparing the window properties (unusually, window is special).