[chrome扩展开发] HTML5 postMessage通信

在background创建一个iframe, 实现background与iframe的通信

代码

1. 先在background创建一个iframe,保存其contentWindow

create_sandbox(info) {
        let frame = document.createElement('iframe')
        frame.setAttribute('id', this.ns)
        frame.setAttribute('data-url', info.url)
        frame.src = info.url;
        frame.style.display = 'none'
        document.body.appendChild(frame)
        this.frameWindow = frame.contentWindow;
    }

2. postMessage 函数用来发送消息

 /**
     * 发送消息到iframe
     * @param {*} data 
     */
    sendMessage2iframe(data) {
        this.log('send message to iframe')
        this.frameWindow.postMessage(data, "*")
    }

3. 先在background 注册两个,消息监听事件
   消息3秒后发是为了等iframe加载完

/**
         * 监听从 sandbox 发过来的消息
         */
        window.addEventListener('message', event => {
            this.log('get Message from iframe');
        });

        /**
         * 监听从 sandbox 发过来的消息
         */
        window.addEventListener('message', event => {
            this.log('get Message from iframe');
        });

        /**
         * 创建 sandbox
         */
        this.create_sandbox({url:'component/retire_sandbox.html'});

        setTimeout(()=>{
            this.sendMessage2iframe({url:'component/retire_sandbox.html'}, '*');
        },3000)

4. iframe的内容

#component/retire_sandbox.html

    
        
    
    
        
    

#component/retire_sandbox.js
console.log('1');
window.addEventListener('message',function(rs){
    console.log(rs);     
    var pointdata=rs.data;
    window.parent.postMessage(pointdata,"*");
})

最终效果

如下图, 发送一条消息, iframe接收后发一条给background,
因为background 注册了两个消息处理事件,打印了两条日志.

注意事项

有时候会提示发送错误，不能克隆 查看一下发送的数据，如果能JSON.stringify一下再发送，应该就可以了