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='https://www.haobala.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。