首页手记 Vue、iframe和safari三者间的孽缘

Vue、iframe和safari三者间的孽缘

标签：

Html/CSS 测试 Vue.js

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

<!-- 代码1 -->
<a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" name="iframe1"></iframe>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" name="iframe1"></iframe>

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

<a href="http://www.imooc.com" target="iframe1">在iframe中打开网页</a>
<div id="app">
<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="" name="iframe1"></iframe>
</div>

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