84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
请教一下开发一个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>
enfant.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>
Ou passez le magasin vuex pour utiliser le même magasin pour les instances de vue des deux pages
Si vous utilisez iframe, vous ne pouvez utiliser websocket que pour notifier les mises à jour. Les données bidirectionnelles de vue et ag ne peuvent être mises à jour qu'en temps réel sur la même page
iframe est multi-pages. Il est extrêmement dangereux et impossible pour d'autres d'utiliser ng ou vue pour faire fonctionner votre page.
Vous pouvez essayer postMessage.
parent.html
enfant.html
Ou passez le magasin vuex pour utiliser le même magasin pour les instances de vue des deux pages
Si vous utilisez iframe, vous ne pouvez utiliser websocket que pour notifier les mises à jour. Les données bidirectionnelles de vue et ag ne peuvent être mises à jour qu'en temps réel sur la même page
.iframe est multi-pages. Il est extrêmement dangereux et impossible pour d'autres d'utiliser ng ou vue pour faire fonctionner votre page.
Vous pouvez essayer postMessage.