时间戳

首页 > 解决方案 > iframe 在收到 postMessage 内容后加载所有内容

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

问题描述

我有一个 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") )

};

我该怎么办？

标签： javascriptvue.jsiframe

解决方案

假设您的第二个应用程序（在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监听事件时更喜欢。

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

推荐阅读