请教一下开发一个H5游戏的管理系统,想在后台输入内容的时候iframe里面的页面元素即时同步内容,想咨询下用什么技术可以实现?vue和angular可以实现吗?
效果如下图:
人生最曼妙的风景,竟是内心的淡定与从容!
ibu bapa.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>
kanak-kanak.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>
Atau lulus kedai vuex untuk menggunakan kedai yang sama untuk contoh vue dua halaman
Jika anda menggunakan iframe, anda hanya boleh menggunakan websocket untuk memberitahu kemas kini Data dua hala vue dan ag hanya boleh dikemas kini dalam masa nyata pada halaman yang sama
iframe adalah merentas halaman Ia amat tidak selamat dan mustahil untuk orang lain menggunakan ng atau vue untuk mengendalikan halaman anda.
Anda boleh mencuba postMessage.
ibu bapa.html
kanak-kanak.html
Atau lulus kedai vuex untuk menggunakan kedai yang sama untuk contoh vue dua halaman
Jika anda menggunakan iframe, anda hanya boleh menggunakan websocket untuk memberitahu kemas kini Data dua hala vue dan ag hanya boleh dikemas kini dalam masa nyata pada halaman yang sama
iframe adalah merentas halaman Ia amat tidak selamat dan mustahil untuk orang lain menggunakan ng atau vue untuk mengendalikan halaman anda.
Anda boleh mencuba postMessage.