angular.js - 可以通过vue或者angular双向数据绑定iframe元素吗?
问题描述
请教一下开发一个H5游戏的管理系统,想在后台输入内容的时候iframe里面的页面元素即时同步内容,想咨询下用什么技术可以实现?vue和angular可以实现吗?
效果如下图:
问题解答
回答1: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
回答2:你用iframe的话只能用websocket来通知更新了,vue和ag的双向数据是在同一页面才可以实时更新的
回答3:iframe属于跨页面了,如果别人可以用ng或者vue就可以操作你的页面是极不安全的,也是不可能的。
你可以试试postMessage。
相关文章:
1. css - .clearfix:after中为什么设置display: table2. javascript - domcontentloaded事件什么时候触发3. android - 如何实现Fragment左右无限滑动功能?4. angular.js - angularjs 路由使用resolve后报错5. node.js - Angular-webpack-Starter, 怎么把NodeJS添加进项目里?6. python - django 按日归档统计订单求解7. 为什么在java中,赋值和数据类型一样的变量i3,i4,System.out.println(i3==i4),最终输出不相等?8. javascript - Vue和React哪个源码更适合阅读学习?不谈框架优劣,只从学习的角度出发,希望知其所以然。9. javascript - 图片链接请求一直是pending状态,导致页面崩溃,怎么解决?10. node.js开发微信公众账号设备功能问题,求解答!!
