angular.js - 可以通过vue或者angular双向数据绑定iframe元素吗?
黄舟
黄舟 2017-05-15 17:14:12
0
3
1011

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

效果如下图:

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

membalas semua(3)
習慣沉默

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

Peter_Zhu

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

習慣沉默

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan