inside-page.vue
<template>
<div>
<h1>Hello</h1>
<div @click="trigger = 'change' " style="color:white;background-color:blue;">
button
</div>
</div>
</template>
<script>
export default {
data(){
return {
trigger: null,
}
},
watch : {
trigger: function(){
window.parent.postMessage({
message: 'scroll',
}, "*");
}
}
}
</script>
parent.vue
<template>
<div>
<iframe
ref="target"
src="inside-page-url"
/>
</div>
</template>
<script>
export defarult {
mounted(){
window.addEventListener("message", (response) => {
if(response.message == 'scroll'){
window.scrollTo({
top: this.$refs.target.offsetTop,
behavior: "smooth",
});
}
})
}
}
</script>