frame自动弹出新窗口的大坑 -转载-老石

阅读次数: 3,515

  • A+
所属分类:建站
在很多时候,需要使用iframe加载别人的网站。往往别人的网站会带一些广告。其实如果说是一些标签广告,这个就比较好处理。

但是!!! 有的时候别人的网站会自动弹出一些讨厌的广告页面,在这个需求下就开始想解决办法。
怎么样才能让iframe不弹出新窗口

首先baidu了一番没有发现什么太有价值的信息。,有个 sandbox 属性,突破点有可能在这里,上w3c看了下具体属性值,如下表:

喂喂喂:格式不对的盆友请用电脑观看效果更佳。腾讯自动转换的,别怪我。

语法

<iframe sandbox="value">

属性值

描述
"" 应用以下所有的限制。
allow-same-origin 允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation 允许 iframe 内容从包含文档导航(加载)内容。
allow-forms 允许表单提交。
allow-scripts 允许脚本执行。
结果被w3c坑了,他只有个属性 allow-scripts 是否允许JavaScript运行的属性比较有用,这个禁止后倒是不自动弹窗了,但是其网页本身的业务也无法运行了,跟我们的需求相悖。不行。
注意:这个时候就把注意力转移到用js去阻止跳转了,解析加密js代码,一个一个的看。

frame自动弹出新窗口的大坑 -转载-老石

但是,他的代码是这样子的。。。。绝望。

跳到了坑里面,但是又很难阻止别人网站中的某段特定的js代码。陷入困境。后面就直接睡觉了。
第二天:
在Google上发现了一些信息,其实这个 sandbox还有其他的属性。ヾ(。`Д´。),山穷水复疑,无路柳暗花明又一村?

喂喂喂:格式不对的盆友请用电脑观看效果更佳。腾讯自动转换的,别怪我。

  • allow-forms 允许提交表单。
  • allow-popups允许弹出式窗口(window.open()showModalDialog()target=”_blank”等等)。
  • allow-pointer-lock 允许(惊喜!)指针锁。
  • allow-same-origin允许文件保持其起源; 从页面加载的页面https://example.com/将保留对该原始数据的访问权限。
  • allow-scripts 允许JavaScript执行,并且还允许功能自动触发(因为它们通过JavaScript实现是微不足道的)。
  • allow-top-navigation 允许文档通过导航顶层窗口突破框架。

考虑到这些,我们可以准确地估计为什么我们最终在上面的Twitter示例中使用了特定的沙盒标志:

  • allow-scripts 是必需的,因为加载到框架中的页面运行一些JavaScript来处理用户交互。
  • allow-popups 是必需的,因为按钮在新窗口中弹出一个tweeting表单。
  • allow-forms 是必须的,因为tweeting表格应该可以提交。
  • allow-same-origin 是必要的,因为twitter.com的cookie否则将无法访问,并且用户无法登录以发布表单。

参考链接:
https://www.zhihu.com/question/33443307 ;
https://www.zhaoj.in/read-1748.html
https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe ;

想来想去想了好多办法 ,也折腾了很久,才发现就是一个属性的问题,还是得善用Google 啊,baidu害人不浅。
这里要检讨一下,也有自己的原因。遇到问题一定要沉着冷静,先从基本点入手,不要想得太复杂化。多问多听多看。
最后附上demo:

其实很简单,就一句话,绕了一个大圈子,真是惭愧啊。
        <iframe src="" scrolling="no" security="restricted" sandbox="allow-same-origin allow-scripts allow-forms" >

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: