我想做的是使用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了,样式表可以处理所有这些。