iframe跨域调用问题

iframe框架之间的函数调用

知识点: iframe同域window对象的函数调用,iframe跨域window对象的函数调用。


获取页面中iframe中的window对象

介于兼容性的问题,推荐使用contentWindow属性获取iframe中的window对象。

// www.a.com/index.html
<iframe id="ifr" src="http://www.a.com/other.html"></iframe>

// js
var ifrWindow = document.getElementById('ifr').contentWindow;

在同域中

首先我们知道,页面中的全局变量以及全局函数都会挂载到window的属性上面:

function a(){
    console.log(1);
};
a();       
window.a();   // 两种调用方式都可以

父调子

由此我们可以结合获取iframe的window对象以及函数挂载到window对象的属性上面可以使用

// 在同域中调用嵌入的iframe嵌入进来页面的函数
// www.a.com/index.html
<iframe id="ifr" src="http://www.a.com/other.html"></iframe>

// js
var ifrWindow = document.getElementById('ifr').contentWindow;
ifrWindow.a();   

子调父

同父调子一样,iframe内部想调用外部页面的函数首先得获取到他的window对象,在javascript中,使用window.parent,window.top来获取想要上层页面的window对象,window.parent表示上一层iframe

// www.a.com/index.html
<iframe id="ifr" src="http://www.a.com/child.html"></iframe>
// js
function top(){
    console.log('顶层')
}

// www.a.com/child.html
<iframe id="ifrc" src="http://www.a.com/ch_child.html"></iframe>
//js
function child(){
    console.log('父层')
}

// www.a.com/ch_child.html
// 获取child.html的window对象
var parenW = window.parent;
parenW.child();   // '父层'

// 获取index.html的window对象
var topW = window.top;  // 或者使用window.parent.parent;
topW.top();    // '顶层'

跨域调用

在iframe中,调用跨域iframe的函数会报跨域的错误,解决这个问题的关键是让函数调用变成同域。及所调用的window对象和被调用的window对象在同一个域,使用中间页进行调用函数

父调子

// www.a.com/index.html
<iframe id="ifr" src="http:www.b.com/index.html"></iframe>
//js
document.getElementById('ifr').contentWindow.fn() // 报错

// www.b.com/index.html
// js
function fn(){
    console.log(1)
}

使用中间页

// www.a.com/index.html
// 嵌入中间页deal.html
<iframe id="ifr" src="http:www.b.com/deal.html"></iframe>

//js
document.getElementById('ifr').contentWindow.fn() // 报错



// www.b.com/index.html
// js
function fn(){
    console.log(1)
}


// 使用中间页嵌入要调用函数的页面,注意,中间页和调用页处在同一个域
// www.b.com/deal.html
<iframe id="ifr" src="http:www.b.com/index.html"></iframe>

// js
document.getElementById('ifr').contentWindow.fn() // 1

子调父

由上面的父调子同理可得

// www.a.com/index.html
<iframe id="ifr" src="http:www.b.com/deal.html"></iframe>

// js
function fn(){
    console.log(1)
}


// www.b.com/index.html
// js
window.parent.fn()    // 报错

同样使用中间页

// www.a.com/index.html
<iframe id="ifr" src="http:www.b.com/deal.html"></iframe>

// js
function fn(){
    console.log(1)
}


// www.b.com/index.html
<iframe id="ifr" src="http:www.a.com/deal.html"></iframe>


// www.a.com/deal.html
//js
window.top.fn();
window.parent.parent.fn();      // 两者皆可

总结

  • 同域的调用,只要获取到iframe的window对象可以直接调用。
  • 跨域的调用,是调用属性/函数的页面与被调用属性/函数的页面处于同一个域
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值