84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
请教一下开发一个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。