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

Question

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

效果如下图：

Answer 1

ibu bapa.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>

---

kanak-kanak.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>

---

Atau lulus kedai vuex untuk menggunakan kedai yang sama untuk contoh vue dua halaman

Answer 2

Jika anda menggunakan iframe, anda hanya boleh menggunakan websocket untuk memberitahu kemas kini Data dua hala vue dan ag hanya boleh dikemas kini dalam masa nyata pada halaman yang sama

Answer 3

iframe adalah merentas halaman Ia amat tidak selamat dan mustahil untuk orang lain menggunakan ng atau vue untuk mengendalikan halaman anda.

Anda boleh mencuba postMessage.