使用postmessage调用iframe中的方法

Kylin_Shaw 发布于 2018/05/24 10:41
阅读 1K+
收藏 0

因为嵌入的页面和主页面不同源,导致跨域问题,所以想使用postmessage进行通信。

//主页面调用方式
function excute(method){
        var targetOrigin = 'http://www.a.com';
        document.getElementById('iframeId').contentWindow.postMessage(method,targetOrigin);
}

嵌入页面 (域:http://www.b.com)

window.addEventListener('message',function(event){
    var origin = event.origin || event.originalEvent.origin; 
    if(origin == 'http://www.a.com'){
      console.log(event.data);
      console.log(event.source);
      if (!event.data) {
      	return;
      }
      excute(event.data);
    }
},false);
 
function excute(methodName){
	switch(methodName){
		case 'methodA':
			methodA();
			break;
		default:
			console.log('cant match method');
	}
}

如此使用会爆出methodA not defined的异常

但是在同源的情况下,直接使用又是可以的。

document.getElementById('iframeId').contentWindow.contentPane.methodA()

请问一下这个是什么问题哈

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部