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



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

视频播放器通过<iframe>:

<iframe src="//www.mp4upload.com/embed-f9ntae302eec.html" scrolling="no" allowfullscreen="" width="765" height="431" frameborder="0">

截至目前,我的脚本:

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);

通过调试,我发现console.log(iframe_document);无法运行
实际上var iframe_document甚至没有创建(代码执行作为var iframe_document停止(。

我似乎无法访问iframes[0]中的"文档">
var iframe_document = iframes[0].contentDocument || iframes[0].contentWindow.document;是否只是错误的,或者iframe是否受到了某种程度的"保护"以防止本地更改

我按照这个文档编写了"跨浏览器"解决方案。


我一直在浏览谷歌和StackOverflow,但除了在这里使用的内容外,我没有找到任何关于"如何在JS中获取iframe中的元素"的答案。


console.log(iframes[0]);的输出(展开(:

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, … }

iframe位于不同的原点,因此篡改页面上的<iframe>元素将不允许查看子级内部的任何内容。

虽然可以设置一个用户脚本在父页和子页上运行,然后用postMessage在iframe及其父窗口之间进行通信,但您可能只需要在iframe内运行脚本。将元数据块更改为包含子页面(mp4upload.com(,然后可以从中删除广告。

附带说明一下,使用setInterval轮询来隐藏元素有点不雅——如果你想隐藏某些元素,你可能只需要插入一个CSS样式表。例如,广告删除脚本可能如下所示:

document.body.appendChild(document.createElement('style')).textContent = `
.ad-container {
display: none;
}
`;

当然,您可以用广告容器的选择器替换.ad-container。这样就不需要任何其他的Javascript了,样式表可以处理所有这些。

最新更新