为什么我的 vue 应用会在父 iframe 中触发 onload 事件答案

【问题标题】：Why does my vue app triggers an onload event in the parent iframe为什么我的 vue 应用会在父 iframe 中触发 onload 事件
【发布时间】：2019-09-03 09:59:10
【问题描述】：

我正在将一个 vue 应用程序加载到 iframe 中。我有一个简单的脚本来创建 iframe 并向其中添加 vue 包。这在 Chrome、Safari 和 FF 中完美运行，但在 IE Edge 的 iframe 上反复触发 onload 事件，导致我的 vue 应用程序一直重新加载。

我尝试在第一个 onload 事件之后设置一个变量 isLoaded 以防止进一步的 onLoads，但这样应用程序根本不会呈现。

首先脚本创建框架：

this.iframe = d.createElement("iframe");
this.iframe.id = "FrameID";
this.iframe.name = "FrameName";

然后我等待onLoad事件初始化frame

this.iframe.addEventListener("load", function() {        
 self.initIframe(self.iframe);
});

然后在我的初始化函数中

  self.initIframe = function(iframe) {
    var doc = iframe.contentWindow.document;
    var body = doc.getElementsByTagName("body")[0];

    //Vue app mounting element 
    var root = doc.createElement("div");
    root.id = "vue-app";
    body.appendChild(root);

    //Add bundle to iframe
    var vueappbundle = doc.createElement("script");
    appjs.src = self.baseUrl + "js/vuebundle.js;
    body.appendChild(appjs);
}

如前所述，这适用于 Chrome、FF 和 Safari，但应用程序会在 IE Edge 中不断重新加载。将 vue 应用程序 url 作为 src 添加到 iframe 确实有效，但是由于我的 vue 应用程序在另一个域上运行，因此我无法在 iframe 和父网站之间进行通信。

【问题讨论】：

IE浏览器控制台是否有错误或警告信息？出于测试目的，请尝试降低 IE 的安全设置，并确保所有区域具有相似的安全设置。还要尝试在安全设置中启用名为“跨域访问数据源”的选项。如果可能的话，您可以使用 JSFidle 或 codepen 创建示例。所以我们也可以尝试使用 IE 进行测试。
你问的是IE还是Edge？它们是两个完全独立的浏览器。
边缘。两者都会发生，但我不需要支持 IE。
您是否尝试过我在之前的评论中向您提出的建议？它有效吗？如果问题仍然存在，请尝试使用 JSFiddle 或 Codepen 提供工作示例。以便我们可以尝试使用 IE 和 Edge 浏览器测试问题。它可以帮助更好地理解问题。感谢您的理解。

标签： javascript vue.js internet-explorer iframe

【解决方案1】：

我设法通过将 Vue 路由器模式更改为“抽象”来解决。不知何故，哈希路由器似乎多次触发加载事件。

【讨论】：