angular.js - 可以透過vue或angular雙向資料綁定iframe元素嗎?

Question

請教一下開發一個H5遊戲的管理系統，想在後台輸入內容的時候iframe裡面的頁面元素即時同步內容，想諮詢下用什麼技術可以實現？ vue和angular可以實作嗎？

效果如下圖：

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

Answer 2

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

Answer 3

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

你可以試試postMessage。