JQuery / Javascript: set iframe border from inside iframe

Question

I have an iframe and I want to set its border to zero.

But I want to do this from within an iframe using javascript or jQuery.

How to do it? Thank you very much in advance,

Answer 1

If the parent element has a different origin, you cannot do this because access to the parent content is denied. The same source 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 | parent source | frame source

Note that when comparing window properties, it is important to use == rather than === (unusual, window is special).

Answer 2

You can do this with $(parent.document).find('#myIframe').css('border', 'xxxx'); . But, as indicated above, both pages (the main one, as well as the one shown in the iframe) must be in the same domain - otherwise you will end up with a security exception due to the same origin policy.

Answer 3

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