javascript - iframe 收到 postMessage 内容后加载所有内容

Question

我有一个 iframe，它通过 contentWindow.postMessage 函数接收一些信息，以便它可以登录到我也在制作的页面。但是我假设页面在 contentWindow.postMessage 消息显示之前加载。域收到信息后如何加载页面？

这是代码。

带有 Iframe 的页面:

<template>
    <iframe
        id="iframe" 
        name="iframe" 
        src="http://localhost:8081/login" 
        frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
        >
        ></iframe>
</template>

<script>
    let show = true;
export default {
    
  name: 'appFrame',
    
    function(){ document.getElementById('iframe').contentWindow.postMessage({
      userData: { 
        info1: localStorage.info1,
        info2: localStorage.info2,
        info3: localStorage.info3
        }}, 
      'http://localhost:8081/list');
      },
  data () {
    return {
      //
    }
  }
}
</script>

<style scoped>

</style>

这是我要加载信息的其他页面上的 window.onmessage:

window.onmessage = function(event)
{
  if(event.origin == 'http://localhost:8080')
  
  document.getElementById('output').innerHTML = event.data;
  localStorage.setItem("info1", event.data.userData.info1);
  localStorage.setItem("info2", event.data.userData.info2);
  localStorage.setItem("info3", event.data.userData.info3);

  console.log("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )

};

我该怎么做？

Answer 1

假设您的第二个应用程序(在 http://localhost:8081 运行)是 Vue.js 应用程序，您将拥有以下代码:

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    console.log("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )
  }
});

在典型的 Vue.js 应用程序中，需要创建根实例。初始代码类似于:

const rootInstance = {
  data() {
    return { /* Declare reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

const app = new Vue(rootInstance);

这里的目标是将此初始化代码放入message 事件处理程序中。将其组合成一个代码，它将是:

const rootInstance = {
  data() {
    return { /* Reactive properties */ };
  },

  methods: {
    attemptAfterLogin() {
      // do something here.
    }
  }

  template: `<div>Hello App</div>`
};

// Initialize Vue.js app
const app = new Vue(rootInstance);

window.addEventListener('message', function(event) {
  if (event.origin == 'http://localhost:8080') {
    document.getElementById('output').innerHTML = event.data;
    localStorage.setItem("info1", event.data.userData.info1);
    localStorage.setItem("info2", event.data.userData.info2);
    localStorage.setItem("info3", event.data.userData.info3);

    // Mount the application
    app.$mount(document.querySelector("#app"));

    // Tell the Vue.js app that localStorage is now set.
    app.attemptAfterLogin();
  }
});

这只是做事的一种方式。另外，在您的内部 iframe 收到消息之前，您可以拥有一个简单的加载器动画。

顺便说一句，在监听事件时，优先使用 addEventListener 而不是 onmessage。

In a nutshell, irrespective of the front-end framework, the goal is to have a single entry point/function to load your application.