Question

我有一个内联框架，可以接收一些信息到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更受欢迎。

简而言之，无论前端框架如何，目标都是要有一个单一的入口点/功能来加载应用程序。

在收到postMessage内容后，iframe会加载所有内容

1 个答案: