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

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

效果如下图:

黄舟
黄舟

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

Antworte allen(3)
習慣沉默

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>

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

或者传递vuex的store 2个页面的vue实例用同一个store

Peter_Zhu

你用iframe的话只能用websocket来通知更新了,vue和ag的双向数据是在同一页面才可以实时更新的

習慣沉默

iframe属于跨页面了,如果别人可以用ng或者vue就可以操作你的页面是极不安全的,也是不可能的。

你可以试试postMessage。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!