angulaire.js - Est-il possible de lier des données bidirectionnelles à des éléments iframe via Vue ou Angular ?

Question

Je voudrais vous poser des questions sur le développement d'un système de gestion pour les jeux H5. Je souhaite synchroniser le contenu des éléments de la page dans l'iframe en temps réel lors de la saisie de contenu en arrière-plan. J'aimerais savoir quelle technologie peut être. utilisé pour y parvenir ? Vue et Angular peuvent-ils y parvenir ?

L'effet est le suivant :

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>

---

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

---

Ou passez le magasin vuex pour utiliser le même magasin pour les instances de vue des deux pages

Answer 2

Si vous utilisez iframe, vous ne pouvez utiliser websocket que pour notifier les mises à jour. Les données bidirectionnelles de vue et ag ne peuvent être mises à jour qu'en temps réel sur la même page

.

Answer 3

iframe est multi-pages. Il est extrêmement dangereux et impossible pour d'autres d'utiliser ng ou vue pour faire fonctionner votre page.

Vous pouvez essayer postMessage.