angular.js - 可以通過vue或者angular雙向數據綁定iframe元素嗎?

問題描述

請教一下開發一個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='http://www.wxshucaidpc.com/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個頁面的vue實例用同一個store

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

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

你可以試試postMessage。