请教一下开发一个H5游戏的管理系统,想在后台输入内容的时候iframe里面的页面元素即时同步内容,想咨询下用什么技术可以实现?vue和angular可以实现吗?
效果如下图:
人生最曼妙的风景,竟是内心的淡定与从容!
parent.html
<p 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> </p> <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
<p id="app"> {{ item }} </p> <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
你用iframe的话只能用websocket来通知更新了,vue和ag的双向数据是在同一页面才可以实时更新的
iframe属于跨页面了,如果别人可以用ng或者vue就可以操作你的页面是极不安全的,也是不可能的。
你可以试试postMessage。
parent.html
child.html
或者传递vuex的store 2个页面的vue实例用同一个store
你用iframe的话只能用websocket来通知更新了,vue和ag的双向数据是在同一页面才可以实时更新的
iframe属于跨页面了,如果别人可以用ng或者vue就可以操作你的页面是极不安全的,也是不可能的。
你可以试试postMessage。