标签： javascript html iframe greasemonkey
我想做的是使用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 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>通过调试，我发现<code>console.log(iframe_document);</code>无法运行。<br/> 实际上甚至没有创建<code>var iframe_document</code>（代码执行会以<code>var iframe_document</code>的形式停止。）</p> <p>似乎我无法访问<code>iframes[0]</code>内的“文档”。<br/> <strong> <code>var iframe_document = iframes[0].contentDocument || iframes[0].contentWindow.document;</code>完全是错误的，还是iframe在某种程度上受到了“保护”以免受本地更改？</strong> </p> <p>我跟随<a href="https://www.w3schools.com/jsref/prop_frame_contentdocument.asp" rel="nofollow noreferrer">this doc</a>编写了“跨浏览器”解决方案。</p> <hr /> <p>一直在浏览Google和StackOverflow，但是除了我在这里使用的内容之外，我没有找到关于“如何在JS的iframe中获取元素”的任何答案。</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> </div> <div class="answer-list"> <h4>1 个答案:</h4> <div class="hr-line-dashed"></div> <p>答案 0 :(得分：1)</p> <div class="answer markdown-body"> <p>位于不同原点的iframe，因此在<em> parent </em>页面上的<code><iframe></code>元素上有问题，因此您无法查看孩子内部的任何内容。</p> <p>虽然可以将用户脚本设置为在父页面和子页面上运行，然后通过<code>postMessage</code>在iframe及其父窗口之间进行通信，但您可能<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> </div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/57106150">Webservice-Interface无法处理<XmlElement（DataType：=“ base64Binary”）></a> </li> <li> <a href="/q/57592154">为什么有时DbSet.Set <TEntity>（）不起作用</a> </li> <li> <a href="/q/58008379">Map <TaskParameters，Array <list >>（）似乎不起作用</a> </li> <li> <a href="/q/58166502">PartialRecursive <T>不适用于泛型</a> </li> <li> <a href="/q/58208027">Discord js <@userid>无法正常工作</a> </li> <li> <a href="/q/58415347">VSCode无法理解React Fragment <> </>，无法识别较新的ES语法（。？）</a> </li> <li> <a href="/q/58617792">mPDF <选择> <选项值=“ X”已选中>在PDF中不显示</a> </li> <li> <a href="/q/58693585"><jdoc：include type =“ component” />不起作用</a> </li> <li> <a href="/q/58906224">使用JS访问<iframe>内部的文档。 “ contentWindow.document”和“ contentDocument”不起作用</a> </li> <li> <a href="/q/58907320">python中的<< TclError：图像“ pyimage *”不存在>></a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host == "www.thinbug.com") { (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>