Question

我正在嵌入包含退出弹出式横幅广告和视频广告的视频。当你视频中的任意位置，然后弹出窗口自动打开或如何单击 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＆amp; openload.co和这些网站充满了视频播放器中的弹出窗口和横幅广告。

Answer 1

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

Sandbox属性具有以下值：

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

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

＆＃13;

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

＆＃13;

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

Answer 2

我在我的流媒体站点上的这段代码中使用了sandbox函数，我在Embed第三方iframe上也有sandbox保护检查，但是为此添加了iv' removeAttribute中的JS，因此，如果您将src中的iframe与其他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>

如何在iframe中屏蔽弹出式广告，横幅广告和视频广告？

2 个答案: