Iframe禁止弹窗

建站交流4年前 (2021-06-10)8890

一、业务场景

移动端H5开发,经常需要展示新闻资讯等内容,新闻资讯经常分为几种,

一种是根据字段拼出,自己写样式展示;

一种直接拿到HTML代码,富文本展示;

还有一种就是给你url链接,利用iframe嵌入展示;(重点)
二、问题描述

利用iframe嵌入网页时,网页本身自带a标签,点击则弹出新窗口,而我们并不希望它弹出;
三、解决方案

利用iframe自带属性sandbox解决
sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”

demo:

<iframe 
    src="https://www.baidu.com" 
    width="100%" height="100%" 
    scrolling="auto" 
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
</iframe>

四、解释

sandbox 属性
“” 应用以下所有的限制。
allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。
allow-popups 允许弹出窗口(如window.open,a标签target="_blank")。

将allow-popups不添加上去,其余都添加上去即可实现。
ps:百度搜sandbox属性,很多都没介绍allow-popups,实属坑。。。

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。