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. android - 如何实现Fragment左右无限滑动功能?2. linux - docker创建nginx容器,为什么不能共享nginx.conf文件?3. angular.js - angularjs 路由使用resolve后报错4. css - .clearfix:after中为什么设置display: table5. java - Tomcat部署方式6. javascript - domcontentloaded事件什么时候触发7. android - 安卓的webView的loadUrl打不开,太长的url超链接,求解8. node.js - Angular-webpack-Starter, 怎么把NodeJS添加进项目里?9. javascript - Vue和React哪个源码更适合阅读学习?不谈框架优劣,只从学习的角度出发,希望知其所以然。10. php - laravel有没有分表的方案
