查看: 2866|回复: 0

[HTML代码] Vue、iframe和safari三者间的孽缘

发表于 2018-2-18 20:04:44

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

  1. <!-- 代码1 -->
  2. <a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
  3. <iframe src="" name="iframe1"></iframe>
复制代码

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

  1. <!-- 代码2 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
  11. <iframe src="" name="iframe1"></iframe>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  14. <script>
  15. var vm=new Vue({
  16. el:'#app'
  17. });
  18. </script>
  19. </body>
  20. </html>
复制代码
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 中拎到外面,发现所有浏览器都正常;

  1. <div id="app">
  2. <a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
  3. </div>
  4. <iframe src="" name="iframe1"></iframe>
复制代码

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

  1. <a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
  2. <div id="app">
  3. <iframe src="" name="iframe1"></iframe>
  4. </div>
复制代码

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

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

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

3、小结

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



回复

使用道具 举报