使用 JS 访问 <iframe> 中的文档。 "contentWindow.document" 和 "contentDocument" 不起作用

Accessing document inside <iframe> using JS. "contentWindow.document" and "contentDocument" doesn't work

我想做的是使用 JavaScript（而不是 jQuery）从视频播放器中隐藏一些元素（包含广告的 div） .我用 Greasemonkey.

视频播放器通过嵌入网站：</p> <pre><code><iframe src="//www.mp4upload.com/embed-f9ntae302eec.html" scrolling="no" allowfullscreen="" width="765" height="431" frameborder="0"> </code></pre> <p>我现在的脚本：</p> <pre><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>通过调试我发现 <code>console.log(iframe_document);</code> 没有达到运行。<br> 实际上 <code>var iframe_document</code> 甚至没有创建（代码执行停止为 <code>var iframe_document</code>）。</p> <p>我似乎无法访问 <code>iframes[0]</code> 中的 "document"。<br> <strong>是 <code>var iframe_document = iframes[0].contentDocument || iframes[0].contentWindow.document;</code> 完全错误还是 iframe 在某种程度上 "protected" 反对本地更改？</strong></p> <p>我跟着<a href="https://www.w3schools.com/jsref/prop_frame_contentdocument.asp" rel="nofollow noreferrer">this doc</a>写了"crossbrowser"解决方案。</p> <hr> <p>一直在浏览 Google 和 Whosebug，但除了我在此处使用的内容外，我没有在 "How to get element inside an iframe in JS" 上找到任何答案。</p> <hr> <p><code>console.log(iframes[0]);</code> 的输出（展开）：</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> </section> <div> <section class="answer"> <p>不同来源的 iframe，因此摆弄 <em>parent</em> 页面上的 <code><iframe></code> 元素将不允许您查看子项中的任何内容。</p> <p>虽然可以在父页面和子页面上为运行设置用户脚本，然后在 iframe 与其父 window 之间使用 [=12= 进行通信]，您可能 <em> 仅 </em> 需要运行 iframe 内的脚本。更改您的元数据块以包含子页面 (<code>mp4upload.com</code>)，然后您可以从那里删除广告。</p> <p>附带说明一下，使用 <code>setInterval</code> 轮询来隐藏元素有点不雅——如果您想隐藏某些元素，您可以插入 CSS 样式表来代替。例如，广告删除脚本可能类似于以下内容：</p> <pre><code>document.body.appendChild(document.createElement('style')).textContent = ` .ad-container { display: none; } `; </code></pre> <p> 当然，您将 <code>.ad-container</code> 替换为广告容器的选择器。那么其他的就不用了Javascript，样式表就可以搞定。</p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>

使用 JS 访问 <iframe> 中的文档。 "contentWindow.document" 和 "contentDocument" 不起作用

Accessing document inside <iframe> using JS. "contentWindow.document" and "contentDocument" doesn't work

html

javascript

iframe

greasemonkey