suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - 可以通过vue或者angular双向数据绑定iframe元素吗?

请教一下开发一个H5游戏的管理系统,想在后台输入内容的时候iframe里面的页面元素即时同步内容,想咨询下用什么技术可以实现?vue和angular可以实现吗?

效果如下图:

黄舟黄舟2780 Tage vor1032

Antworte allen(3)Ich werde antworten

  • 習慣沉默

    習慣沉默2017-05-15 17:16:12

    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="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

    Antwort
    0
  • 天蓬老师

    天蓬老师2017-05-15 17:16:12

    你用iframe的话只能用websocket来通知更新了,vue和ag的双向数据是在同一页面才可以实时更新的

    Antwort
    0
  • 習慣沉默

    習慣沉默2017-05-15 17:16:12

    iframe属于跨页面了,如果别人可以用ng或者vue就可以操作你的页面是极不安全的,也是不可能的。

    你可以试试postMessage。

    Antwort
    0
  • StornierenAntwort