Maison > Questions et réponses > le corps du texte
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 :
習慣沉默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
天蓬老师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
.習慣沉默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.