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 при прослушивании событий.

В двух словах, независимо от внешней среды, цель состоит в том, чтобы иметь единую точку входа / функцию для загрузки вашего приложения.