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

iframe跨域调用问题相关推荐

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Vue和iframe跨域调用
Test.js 在iframe内的html页面引入 // 在iframe子页面引入该js window.addEventListener ('message', function(event) {/* ...
通过iframe中间页实现js跨域调用
什么是跨域调用? 当两个页面端口不同或者协议不同,或者ip地址不同的时候,如果想在这个页面调用另外一个页面中的方法,就叫做跨域调用父页面调用子页面通过iframe实现跨域请求 www.a.com ...
iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
怎样获取不同域名的ifram的html,AJAX | iframe跨域的实现方法
iframe跨域 HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法--如何使用iframe跨域.讲解了iframe跨域的基本原理与流程,并配以实战 ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
利用代理页面解决html iframe跨域访问网站问题
原文:利用代理页面解决html iframe跨域访问网站问题源代码下载地址: http://www.zuidaima.com/share/1854884509142016.htm 在做项目的时候遇到 ...
Cookie 跨域解决方案（IFrame跨域）
IFrame跨域思路:假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面,通过a.haorooms.com/text.html页面去修改b ...
iframe 跨越访问_js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

iframe跨域调用问题

iframe框架之间的函数调用

获取页面中iframe中的window对象

在同域中

父调子

子调父

跨域调用

父调子

子调父

总结

iframe跨域调用问题相关推荐

最新文章

热门文章