vue.js - 可以通过vue或者angular双向数据绑定iframe元素吗?
本文介绍了vue.js - 可以通过vue或者angular双向数据绑定iframe元素吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
请教一下开发一个H5游戏的管理系统,想在后台输入内容的时候iframe里面的页面元素即时同步内容,想咨询下用什么技术可以实现?vue和angular可以实现吗?
效果如下图:
解决方案
parent.html
<div id="app">
<input type="text" v-model="item.name" />
<input type="checkbox" v-model="item.check" />
<input type="date" v-model="item.date" />
<iframe ref="iframe" src="child.html" @load="load"></iframe>
</div>
<script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
<script>
window.app = new Vue({
el: '#app',
data() {
return {
item: {
name: null,
check: false,
date: null,
},
}
},
methods: {
load: function (item) {
const app = this.$refs.iframe.contentWindow.app;
if (app && app.setContent) {
app.setContent(this.item)
}
else {
window._item = this.item
}
}
}
})
</script>
child.html
<div id="app">
{{ item }}
</div>
<script src="http://cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
<script>
window.app = new Vue({
el: '#app',
data() {
return {
item: null,
}
},
created: function () {
this.setContent(window.parent.window._item);
},
methods: {
setContent: function (item) {
this.item = item;
}
}
})
</script>
或者传递vuex的store 2个页面的vue实例用同一个store
这篇关于vue.js - 可以通过vue或者angular双向数据绑定iframe元素吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文