recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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 :

黄舟黄舟2780 Il y a quelques jours1031

répondre à tous(3)je répondrai

  • 習慣沉默

    習慣沉默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>

    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

    répondre
    0
  • 天蓬老师

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

    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

    .

    répondre
    0
  • 習慣沉默

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

    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.

    répondre
    0
  • Annulerrépondre