Vue内嵌iframe及通讯

Vue内嵌iframe及通讯
消息交互方式
父向子传递消息:iframeEl.contentWindow.postMessage
子接收父消息:window.addEventListener(‘message’)
子向父传递消息:window.parent.postMessage
父接收子消息:window.addEventListener(‘message’)

实例-html:

parent.html

	// 父向子发消息
    var sendMessage = function(msg) {
        // msg必须为string
        iframeEl.contentWindow.postMessage(msg, '*');
    };

	// 父接收子消息
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });


child.html

	// 子接收父消息
    bindEvent(window, 'message', function (e) {
        results.innerHTML = e.data;
    });

	// 子向父传递消息
    var sendMessage = function (msg) {
        // msg必须为string
        window.parent.postMessage(msg, '*');
    };



实例-Vue:

parent.vue


从子页面传递的数据:{ {childData}}
向iframe发送信息


child.vue

从父页面传递的数据:{ {iframeData}}
向父级发送消息

你可能感兴趣的:(前端问题总汇,vue)