iframe及与页面之间的通信
获取iframe对象
iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它
代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级页面能够以一种合适的方式获取iframe的window对象,父级页面和iframe页面的域名应该保持一致
iframe元素拥有名为contentDocument、parentWindow、contentWindow(全兼容)等属性, 如:
iframeElement.contentWindow || iframeElement.contentDocument.parentWindow
父级页面的window对象在iframe中也能够以window.parent获取
判断 iframe 是否加载完毕的方法(也适用于script加载)
js.onload = js.onreadystatechange = function() {
if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
// callback在此处执行
js.onload = js.onreadystatechange = null;
...
}
}; //为了兼顾事件的一致性,改代码如下:
var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm"; if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
iframeOnload();
});
} else {
iframe.onload = function(){
iframeOnload();
};
} document.body.appendChild(iframe); function iframeOnload() {
alert("Local iframe is now loaded.");
}
iframe 解决跨域问题
什么是跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象
因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象, 导致了跨域问题
域仅仅是通过”URL的首部”来识别, “URL的首部”指window.location.protocol+window.location.host,也可以理解为”Domains, protocols and ports must match”
方法一: document.domain + iframe
解决主域相同而二级域名不同的情况, 达到两个页面相互通信的目的.
方法二: iframe + location.hash
解决不同域名下的两个页面的通信问题.
由于改变hash并不会导致页面刷新,如:http://a.com#helloword 中的’#helloworld’就是location.hash, 所以可以利用hash来在url中传值
不在同一个域下的两个页面,IE、Chrome不允许修改parent.location.hash的值(Firefox可以修改), 所以需要借助一个iframe作为代理, 修改iframe上url的hash值来达到传递数据的目的, 此时在父级页面上加一个定时器,隔一段时间来获取location.hash值,如果有变化或符合处理的要求, 及关掉间隔执行,如:
先是a.com下的文件cs1.html文件: page1:父页面
function checkHash() {
var data = location.hash ? location.hash.substring(1) : '';
if (data) {
console.log(data);
//do something...
}
}
setInterval(checkHash, 2000); page2: 子页面
try {
parent.location.hash = 'somedata';
} catch (e) {
// ie、chrome的安全机制无法修改parent.location.hash,
// 所以要利用一个代理iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = page3 + '#somedata'; //page3与父页面在同一个域下
document.body.appendChild(ifrproxy);
} page3: 代理iframe页面
//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
缺点
方法一:安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞
方法二:数据直接暴露在了url中,数据容量和类型都有限s
参考
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/
iframe及与页面之间的通信的更多相关文章
- 让微信小程序页面之间的通信不在变得困难
一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...
- iframe嵌套的页面之间传值问题
项目中很多时候会遇到需要用 iframe 嵌套页面的情况.有时候会有这样的需求: iframe 嵌套的页面 A ,点击之后要跳到页面 B ,但是同时还需要 A 页面中的某个属性值. 此时可以先把 A ...
- html5 xdm 页面之间的通信
<!-- 这个是父页面xdm.html --><!DOCTYPE html> <html> <head> <meta charset=" ...
- 六)iframe 及父子页面之间获取元素、方法调用
http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...
- iframe父子页面之间相互调用元素和函数
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- js 页面间的通信
看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...
- SSE两个页面的相互通信
两个页面之间互相通信 首先搭建express框架,然后通过two页面发送数据给服务器,服务器把数据传送给one页面 在two 中发送数据,在one中显示 router/index.js var axi ...
- 【JavsScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
随机推荐
- SQL奇技淫巧
1.SQL行列转换 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93李四 语文 74李四 数学 84李四 物理 94想变成(得到如下结果): 姓名 ...
- 来一轮带注释的demo,彻底搞懂javascript中的replace函数
javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...
- 一、JavaSE语言概述
1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言 第二代:汇编语言 第三代语言:高级语言(面向过程-面向对象) 4.jav ...
- 关于微信小程序,一些想法
不负众望,小程序终于在昨天1月9日正式上线,从凌晨微信公开课发布了微信<一月九日,一年之约>到现在,整整一天的时间,朋友圈.自媒体平台都在不断的发着关于小程序的各种文章,"APP ...
- JavaWeb一小时急速入门总结反思
0.条件一个可以开发javaee的开发工具1.配置首先需要下载tomcat,用来跑javaweb的服务器,下载后自行百度配置.然后需要servlet.jar包,其实就是一个java网络层api包2.基 ...
- Angular5系列教程:ng-book2-angular-5-r66 土家翻译,话糙理不糙
嗯, 在工作还辣么忙之时,看了这本书,感觉很不错.想分享给国内朋友们.结合自己的理解和整理加翻译,可能有点糙,但是,话糙理不糙嘛.出系列,不知道会不会弃坑,不立Flag了.持续更新.....我会放在印 ...
- 从开源项目看python代码注释
最近看了不少代码,也写了不少代码,所以在看和写之间发现了很多的问题,真的是很多,至少从我的认识来看,有几个地方有很大的改进空间,这里不准备把所有的问题都列举出来,所以就先挑选一个比较明显得来和大家聊聊 ...
- 3.移植uboot-使板卡支持nor、nand
在上一章,我们添加了nor,nand启动后,uboot启动出如下图所示: 上面的Flash: *** failed *** 是属于uboot第二阶段函数board_init_r()里的代码, 代码如下 ...
- 深入理解cookie和session
cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结. 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取一个链 ...
- css实现连续的图像边框
有时我们想把一个图片应用为边框,而不是背景,最简单的办法是使用两个HTML元素,一个元素用来把我们的石雕图片设置为背景,另一个元素用来存放内容,并设置纯白背景,然后覆盖在前者之上,这个方法需要一个额外 ...