angular.js - Adakah mungkin untuk data dua hala mengikat elemen iframe melalui vue atau sudut?

Question

Saya ingin bertanya kepada anda tentang membangunkan sistem pengurusan untuk permainan H5. Saya ingin menyegerakkan kandungan elemen halaman dalam iframe dalam masa nyata apabila memasukkan kandungan di latar belakang digunakan untuk mencapai ini? Bolehkah vue dan angular mencapai ini?

Kesannya adalah seperti berikut:

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.