these are main app & sub app below, Why does the history.length of the main application increase due to the history.pushState() method being called within the iframe?
<!DOCTYPE html>
<html>
<body>
<div id="app">{{ message }}</div>
<iframe src="http://127.0.0.1:5501/iframe-page2.html" id="iframe2"></iframe>
<!-- Vue2 的 CDN -->
<script src="/[email protected]"></script>
<script>
new Vue({
el: "#app",
data: {
message: "Main(Vue2)"
},
});
window.addEventListener("popstate", (event) => {
console.log("【main app】:", event, window.history.length);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="app">{{ message }}</div>
<!-- Vue3 的 CDN -->
<script src="/[email protected]/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Iframe(Vue3)"
};
},
});
setTimeout(() => {
console.log("before history.length, ", history.length, history.state);
history.pushState({
test2: 222
}, "", "test222");
console.log("after history.length, ", history.length, history.state);
}, 20000);
app.mount("#app");
window.addEventListener("popstate", (event) => {
console.log("【sub app】:", event);
});
</script>
</body>
</html>