問題描述

請教一下開發(fā)一個(gè)H5游戲的管理系統(tǒng)，想在后臺輸入內(nèi)容的時(shí)候iframe里面的頁面元素即時(shí)同步內(nèi)容，想咨詢下用什么技術(shù)可以實(shí)現(xiàn)？vue和angular可以實(shí)現(xiàn)嗎？

效果如下圖：

問題解答

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='http://www.aoyou183.cn/wenda/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個(gè)頁面的vue實(shí)例用同一個(gè)store

你用iframe的話只能用websocket來通知更新了，vue和ag的雙向數(shù)據(jù)是在同一頁面才可以實(shí)時(shí)更新的

iframe屬于跨頁面了，如果別人可以用ng或者vue就可以操作你的頁面是極不安全的，也是不可能的。

你可以試試postMessage。