Vue、iframe和safari三者间的孽缘-原创手记-慕课网

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

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

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

<!-- 代码2 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
        <iframe src="" name="iframe1"></iframe>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm=new Vue({
            el:'#app'
        });
    </script>
</body>
</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 中拎到外面，发现所有浏览器都正常；
<div id="app">
<a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
</div>
<iframe src="" name="iframe1"></iframe>
（4）在代码2的基础上将a标签从 div#app 中拎出来，只保留iframe在其中，发现Safari又出现异常；
<a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
<div id="app">
<iframe src="" name="iframe1"></iframe>
</div>

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

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

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

3、小结

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

Vue、iframe和safari三者间的孽缘原创