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.info("LOCALSTORAGE: ", localStorage.getItem("info1"), localStorage.getItem("info2"), localStorage.getItem("info3") )
};
Как бы я это сделал?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Предполагая, что ваше второе приложение (работающее на http://локальный: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.info("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 не получит сообщение, у вас может быть простая анимация загрузчика.
Кстати, предпочтите addEventListeneronmessage при прослушивании событий.
In a nutshell, irrespective of the front-end framework, the goal is to have a single entry point/function to load your application.
@Otorrinolaringologista-man, каждое приложение Vue.js обычно имеет один компонент верхнего уровня. Это корневой экземпляр. Подробнее здесь.
так что моим единственным компонентом верхнего уровня будет мой app.vue? потому что он тот, у кого мой routerview перенаправляет на все.
@Otorrinolaringologista-человек, это может случиться. Будут и другие вещи, которые вы, возможно, захотите изучить. Например, поведение vue-router с iFrame, множественная последовательность инициализации и т. д.
что, если мы сделаем это так. Как мне продолжать пытаться отправить дату, пока окно iframe не получит ее и не отправит информацию обратно?
что именно вы подразумеваете под «корневым экземпляром»?