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对象可以直接调用。
• 跨域的调用，是调用属性/函数的页面与被调用属性/函数的页面处于同一个域