84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
请教一下开发一个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>
Or pass the vuex store to use the same store for the vue instances of the two pages
If you use iframe, you can only use websocket to notify of updates. The two-way data of vue and ag can only be updated in real time on the same page
iframe is cross-page. It is extremely unsafe and impossible for others to use ng or vue to operate your page.
You can try postMessage.
parent.html
child.html
Or pass the vuex store to use the same store for the vue instances of the two pages
If you use iframe, you can only use websocket to notify of updates. The two-way data of vue and ag can only be updated in real time on the same page
iframe is cross-page. It is extremely unsafe and impossible for others to use ng or vue to operate your page.
You can try postMessage.