栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Vue、iframe和safari三者间的孽缘

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue、iframe和safari三者间的孽缘

众所周知,当一个页面中包含下述iframe标签和a标签时,点击a标签超链接就会在iframe中打开目标网站。

在iframe中打开网页

那假如把代码改成这样应该还是一样的吧?至少最开始我是这么认为的。




    
    document


    
 在iframe中打开网页
 
    
    
    

1、问题来了

事实上,我之前在一个项目中使用了类似上述的做法(用a标签的target属性去关联iframe),但在测试兼容性的时候,却被Safari说了NO(其它Chrome、IE、FireFox、Opera等浏览器是肯定这一做法的)!在Safari中点击超链接后,Safari是在新窗口中打开了网页。

2、测试过程

刚开始有点摸不着头脑,不过经过一番折腾,整理后的测试情况依次如下:

(1)先测试了单一环境中(代码1)a标签和iframe标签的交互,所有浏览器都是正常的;
(2)将代码调整至上述代码2的情况,发现Safari开始脱离大流了;

从这两步的测试分析,貌似是跟Vue有关,但直接深究vue需要很多时间,所以这条线先搁置;

(3)将代码2稍作调整,把iframe从 div#app 中拎到外面,发现所有浏览器都正常;

在iframe中打开网页

(4)在代码2的基础上将a标签从 div#app 中拎出来,只保留iframe在其中,发现Safari又出现异常;

在iframe中打开网页


咦?!难道Safari中的a标签有精神洁癖,如果iframe被Vue实例包了,a就立马跟iframe断交?!亦或者还有其它原因?于是继续往下。

(5)将iframe从页面中注释或删除掉,发现所有浏览器都会从新窗口中打开网页。

噢?也有可能不是精神洁癖,而是因为当iframe被vue实例包裹后,a标签找不到iframe了?

3、小结

其中原因我暂时还没弄清楚,在之前做项目的时候我是使用click事件取代了a[target]=>iframe的方式,至于上面搁置的的那条线也一直没找到好的状态去追究。如果有知情者,烦请指导。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241398.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号