Accessing document inside using JS. "contentWindow.document" and "contentDocument" doesn't work</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2019-11-17T23:31:50.600" class="fromnow">Nov 17 '19 at 23:31</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2019-11-18T20:30:00.487" datetime="2019-11-18T20:30:00.487">Nov 18 '19 at 20:30</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,275 times"> <span class="fc-light mr2">Viewed</span> 2,275 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="58906224" data-ownerid="10728702" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="58906224"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>What I'm trying to do is to hide some elements(divs that contain ads) from video player using JavaScript (<strong>not jQuery</strong>). I use Greasemonkey.</p> <p>Video player is embedded into the site by < iframe > :</p> <pre><code><iframe src="//www.mp4upload.com/embed-f9ntae302eec.html" scrolling="no" allowfullscreen="" width="765" height="431" frameborder="0"> </code></pre> <p>My script as of right now:</p> <pre class="lang-js prettyprint-override"><code>function remove_iframe_ads(){ var video_player_window = document.getElementById("player-block"); if(video_player_window == null) return; var iframes = video_player_window.getElementsByTagName('iframe'); if(iframes == null || iframes.length == 0) return; console.log(iframes[0]); // for debugging var iframe_document = iframes[0].contentDocument || iframes[0].contentWindow.document; console.log(iframe_document); }; setInterval(remove_iframe_ads, 1000); </code></pre> <p>Through debugging I found out that <code>console.log(iframe_document);</code> doesn't get to run.<br/> Actually <code>var iframe_document</code> isn't even created (code execution stops as <code>var iframe_document</code>).</p> <p>It seems that I can't access the "document" inside an <code>iframes[0]</code>.<br/> <strong>Is <code>var iframe_document = iframes[0].contentDocument || iframes[0].contentWindow.document;</code> simply wrong or is the iframe being somewhat "protected" against local changes?</strong></p> <p>I followed <a class="external-link" href="https://www.w3schools.com/jsref/prop_frame_contentdocument.asp" rel="nofollow noreferrer">this doc</a> to write "crossbrowser" solution.</p> <hr/> <p>Have been looking through Google and StackOverflow, but I didn't find any answers on "How to get element inside an iframe in JS" apart from what I used here.</p> <hr/> <p>Output of <code>console.log(iframes[0]);</code> (unfolded):</p> <pre><code>iframe accessKey: "" accessKeyLabel: "" align: "" allowFullscreen: true allowPaymentRequest: false assignedSlot: null attributes: NamedNodeMap(6) [ src="//www.mp4upload.com/embed-f9ntae302eec.html", scrolling="no", allowfullscreen="", … ] baseURI: "https://shinden.pl/episode/45069-gate-jieitai-kanochi-nite-kaku-tatakaeri-2/view/137211#column-one-inner" childElementCount: 0 childNodes: NodeList [] children: HTMLCollection { length: 0 } classList: DOMTokenList [] className: "" clientHeight: 431 clientLeft: 0 clientTop: 0 clientWidth: 765 contentEditable: "inherit" contextMenu: null dataset: DOMStringMap(0) dir: "" draggable: false firstChild: null firstElementChild: null frameBorder: "0" height: "431" hidden: false id: "" innerHTML: "" innerText: "" isConnected: true isContentEditable: false lang: "" lastChild: null lastElementChild: null localName: "iframe" longDesc: "" marginHeight: "" marginWidth: "" name: "" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: <form action="http://player.shinden.eu" method="post" target="_blank" style="text-align:right; margin: 10px 20px"> nextSibling: #text " " nodeName: "IFRAME" nodeType: 1 nodeValue: null offsetHeight: 431 offsetLeft: 5 offsetParent: <div class="player-online box" style=""> offsetTop: 10 offsetWidth: 765 onabort: null onanimationcancel: null onanimationend: null onanimationiteration: null onanimationstart: null onauxclick: null onblur: null oncanplay: null oncanplaythrough: null onchange: null onclick: null onclose: null oncontextmenu: null oncopy: null oncuechange: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragexit: null ondragleave: null ondragover: null ondragstart: null ondrop: null ondurationchange: null onemptied: null onended: null onerror: null onfocus: null onfullscreenchange: null onfullscreenerror: null ongotpointercapture: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onloadeddata: null onloadedmetadata: null onloadend: null onloadstart: null onlostpointercapture: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmozfullscreenchange: null onmozfullscreenerror: null onpaste: null onpause: null onplay: null onplaying: null onpointercancel: null onpointerdown: null onpointerenter: null onpointerleave: null onpointermove: null onpointerout: null onpointerover: null onpointerup: null onprogress: null onratechange: null onreset: null onresize: null onscroll: null onseeked: null onseeking: null onselect: null onselectstart: null onshow: null onstalled: null onsubmit: null onsuspend: null ontimeupdate: null ontoggle: null ontransitioncancel: null ontransitionend: null ontransitionrun: null ontransitionstart: null onvolumechange: null onwaiting: null onwebkitanimationend: null onwebkitanimationiteration: null onwebkitanimationstart: null onwebkittransitionend: null onwheel: null outerHTML: "<iframe src=\"//www.mp4upload.com/embed-f9ntae302eec.html\" scrolling=\"no\" allowfullscreen=\"\" width=\"765\" height=\"431\" frameborder=\"0\"></iframe>" ownerDocument: HTMLDocument https://shinden.pl/episode/45069-gate-jieitai-kanochi-nite-kaku-tatakaeri-2/view/137211#column-one-inner parentElement: <div id="player-block" class="player-container"> parentNode: <div id="player-block" class="player-container"> prefix: null previousElementSibling: null previousSibling: #text " " referrerPolicy: "" sandbox: DOMTokenList [] scrollHeight: 431 scrollLeft: 0 scrollLeftMax: 0 scrollTop: 0 scrollTopMax: 0 scrollWidth: 765 scrolling: "no" shadowRoot: null slot: "" spellcheck: false src: "https://www.mp4upload.com/embed-f9ntae302eec.html" srcdoc: "" style: CSS2Properties(0) tabIndex: 0 tagName: "IFRAME" textContent: "" title: "" width: "765" <prototype>: HTMLIFrameElementPrototype { getSVGDocument: getSVGDocument(), src: Getter & Setter, srcdoc: Getter & Setter, … } </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/greasemonkey" class="post-tag js-gps-track" title="show questions tagged 'greasemonkey'" rel="tag">greasemonkey</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2019-11-18T20:30:00.487" class="relativetime">Nov 18 '19 at 20:30</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Gaben</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 17 '19 at 23:31">asked Nov 17 '19 at 23:31</time> <a href="../../users/10728702/gaben" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10728702.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Gaben" /> </a> <div class="s-user-card--info"> <a href="../../users/10728702/gaben" class="s-user-card--link">Gaben</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">345</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badges">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-58906224" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="58906224" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-104075145" class="comment js-comment " data-comment-id="104075145" data-comment-owner-id="2341603" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment104075145_58906224"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Specifically, [this answer](https://stackoverflow.com/a/4333824/2341603) which states to use `iframe.contentWindow.document` instead of `iframe.contentDocument`.</span> – <a href="../../users/2341603/obsidian-age" title="41,205 reputation" class="comment-user ">Obsidian Age</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/58906224/accessing-document-inside-iframe-using-js-contentwindow-document-and-contentdo#comment104075145_58906224"><span title="2019-11-17T23:34:32.530 License: CC BY-SA 4.0" class="relativetime-clean">Nov 17 '19 at 23:34</span></a></span> </div> </div> </li> <li id="comment-104106382" class="comment js-comment " data-comment-id="104106382" data-comment-owner-id="10728702" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment104106382_58906224"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@ObsidianAge According to [link](https://www.w3schools.com/jsref/prop_frame_contentdocument.asp) either of those should work. Any reason why I should discard `iframe.contentDocument`?</span> – <a href="../../users/10728702/gaben" title="345 reputation" class="comment-user owner">Gaben</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/58906224/accessing-document-inside-iframe-using-js-contentwindow-document-and-contentdo#comment104106382_58906224"><span title="2019-11-18T20:35:13.547 License: CC BY-SA 4.0" class="relativetime-clean">Nov 18 '19 at 20:35</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="58906261"></a> <div id="answer-58906261" class="answer accepted-answer" data-answerid="58906261" data-ownerid="9515207" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="58906261"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The iframe on a different origin, hence fiddling with the <code><iframe></code> element on the <em>parent</em> page won't permit you to view anything inside the child.</p> <p>While it would be possible to set up a userscript to run on both the parent page and the child page, and then communicate between the iframe and its parent window with <code>postMessage</code>, you probably <em>only</em> need to run the script inside the iframe. Change your metadata block to include the child page instead (<code>mp4upload.com</code>), and then you can remove the ads from there.</p> <p>As a side note, polling with <code>setInterval</code> to hide elements is a bit inelegant - if you want to hide certain elements, you might be able to just insert a CSS stylesheet instead. For example, the ad-removal script could be something like the following:</p> <pre><code>document.body.appendChild(document.createElement('style')).textContent = ` .ad-container { display: none; } `; </code></pre> <p>where you replace <code>.ad-container</code> with the selector(s) of the ad containers, of course. Then there won't be need for any other Javascript, the stylesheet can take care of it all.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 17 '19 at 23:37">answered Nov 17 '19 at 23:37</time> <a href="../../users/9515207/certainperformance" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9515207.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="CertainPerformance" /> </a> <div class="s-user-card--info"> <a href="../../users/9515207/certainperformance" class="s-user-card--link">CertainPerformance</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">356,069</li> <li class="s-award-bling s-award-blinggold" title="52 gold badges">52</li> <li class="s-award-bling s-award-blingsilver" title="309 silver badges">309</li> <li class="s-award-bling s-award-bling__bronze" title="320 bronze badges">320</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-58906261" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="58906261" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-104107610" class="comment js-comment " data-comment-id="104107610" data-comment-owner-id="10728702" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment104107610_58906261"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">As far as I know, if I need to use `.parentNode` I can't do this with just `.css` (?). Every other "ad-blocking" feature, I inserted into css file. I'm planning to make some sort of "event listener" to check whether created elements are to be deleted. // So if I change metadata block, will I be able to access `iframe` from the same scope as I access default `document` block?</span> – <a href="../../users/10728702/gaben" title="345 reputation" class="comment-user owner">Gaben</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/58906224/accessing-document-inside-iframe-using-js-contentwindow-document-and-contentdo#comment104107610_58906261"><span title="2019-11-18T21:21:44.940 License: CC BY-SA 4.0" class="relativetime-clean">Nov 18 '19 at 21:21</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>