如何在 iframe 中阻止弹出式广告、横幅广告和视频广告？答案

【问题标题】：How to block pop-up, banner ads and video ads in iframe?如何在 iframe 中阻止弹出式广告、横幅广告和视频广告？
【发布时间】：2018-07-13 07:06:55
【问题描述】：

我正在嵌入具有退出弹出式横幅广告和视频广告的视频。当你视频中的任何位置然后弹出窗口自动打开或如何点击 X 图标关闭横幅广告。

.iframe{
  width: 100%;
  float: left;
  margin-top: 5px;
}

<div class="iframe">
   <iframe width="1000" height="600" src="https://www.youtube.com/embed/Sb_60g3u1LU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

我正在使用其他第三方网站来托管 vidzi.tv 和 openload.co 等视频，这些网站在视频播放器中充满了弹出窗口和横幅广告。

【问题讨论】：

恐怕因为他们都是第 3 方，所以可能没有适合所有人的解决方案。使用沙盒属性时，您可能会禁用视频成功播放所需的功能。
@Lee Kowalkowski 同意你的看法。

标签： javascript jquery video iframe

【解决方案1】：

您可以在 iframe 中添加 sandbox 属性。仅允许添加到属性的值。浏览器将不允许您未在 sandbox 属性中添加的任何值。

沙盒属性具有以下值：

allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation

我已修改您的代码以包含沙盒选项，但尚未添加 allow-popups，因此此 iframe 中将不允许弹出窗口。

<div class="iframe">
   <iframe sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" width="1000" height="600" src="https://www.youtube.com/embed/Sb_60g3u1LU" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

您可以找到有关沙盒属性here 的更多信息。请注意，此属性是 HTML5 中的新属性。

【讨论】：

@values 在哪里添加这个值？ Css 部分还是必须创建其他页面？
您必须在 iframe 标记中添加上述选项之一。就像我在上面的答案中的代码示例中显示的那样。
但这行不通。我用这个视频进行了测试。我仍然收到广告youtube.com/embed/nmd8_8UiYHE
对不起。这是在 openload 上阻止弹出窗口的工作。谢啦。抱歉误会<div class="iframe"> <iframe sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation " width="1000" height="600" src="http://openloadmovies.tv/" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div> 我不会从该网站获得任何弹出窗口。该死的..我怎么能错过这个属性
如果它满足您的问题，请标记我的回复并回答。谢谢。

【解决方案2】：

我在我的流媒体站点上的这段代码中使用了sandbox 函数，其中我Embed 3rd Party iframe 并且他们也有sandbox 保护检查，但是为此我在我的JS 中添加了removeAttribute因此，如果您将iframe 的src 从其他button 更改为您可以单击此按钮将sandbox 属性添加到您的iframe，或者您也可以在您的代码中添加click function iframe 成功。

//JS
window.onload = function(){
    var button = document.getElementsByName("sandbox")[0]
    var iframe = document.getElementsByName("framez")[0]
    button.addEventListener('click',sndbx,false);

    function sndbx(){
    var nibba = document.getElementById("framez").src;
    if(iframe.sandbox == 'allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation'){
    document.getElementById("framez").removeAttribute("sandbox"); 
    }
    frames['framez'].location.href=nibba;
    iframe.sandbox = 'allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation';
    }
}

<!--HTML-->
<button name="sandbox">SandBox</button>
<iframe name="framez" id="framez" src="YOUR_SOURCE" allowfullscreen="true"></iframe>

【讨论】：