最近遇到了一个闹心的问题,就是 调用iframe中的函数并获取返回值。
document.getElementById("iframe").contentWindow.func(data1,data2...);
子 Iframe 中 调用 父html中方法:
parent.func(data1,data2...)
但这个方法的前提条件是要在同域名下,想要如果域名不同,甚至端口不同,都会存在 跨域 的问题。
那怎么解决 跨域 的问题呢?百度了很多方法,发现有两个是很好用的:
法一:建立一个中间页,来解决父子间跨域问题
照着文档可以做出demo,这里就不贴实例代码了,原理是在父级页面上自动生成一个隐藏的iframe,与子集同域,这样新生成的iframe与子集就不会存在跨域的问题了,父级再根据dom获取同页面的iframe,就搞定了~
法二:用window.postMessage方法
父:
<iframe src="http://127.0.0.1:9090/child.html" frameborder="0" id="childFrame"></iframe>
<button onclick="call('back',123)">btn1</button>
<button onclick="call('roi',456)">btn2</button>
<script>
function call (val,str) {
var iframe = document.getElementById('childFrame').contentWindow;
var childDomain = 'http://127.0.0.1:9090';
iframe.postMessage({type:val,seriesIndex:str}, childDomain);
}
window.addEventListener('message', function(obj) {
console.log('获取子集函数返回值')
console.log(obj.data);
})
</script>
子:
obj是父传过去的对象,type:back/roi , id:seriesIndex,callbackStr是子给父的返回值,下面的地址是父的域名
<script>
window.addEventListener('message', function(obj) {
var callbackStr;
if (obj.data.type == 'back') {
callbackStr = getSNRBackValueNow(obj.data.seriesIndex);
}else {
callbackStr = getSNRROIValueNow(obj.data.seriesIndex);
}
window.parent.postMessage(callbackStr, 'http://127.0.0.1:8080');
})
function getSNRBackValueNow (val) {
return 'fn1:' + val
}
function getSNRROIValueNow (val) {
return 'fn2:' + val
}
</script>
网友评论