获取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及与页面之间的通信的更多相关文章

  1. 让微信小程序页面之间的通信不在变得困难

    一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...

  2. iframe嵌套的页面之间传值问题

    项目中很多时候会遇到需要用 iframe 嵌套页面的情况.有时候会有这样的需求: iframe 嵌套的页面 A ,点击之后要跳到页面 B ,但是同时还需要 A 页面中的某个属性值. 此时可以先把 A ...

  3. html5 xdm 页面之间的通信

    <!-- 这个是父页面xdm.html --><!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 六)iframe 及父子页面之间获取元素、方法调用

    http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...

  5. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. js 页面间的通信

    看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...

  7. SSE两个页面的相互通信

    两个页面之间互相通信 首先搭建express框架,然后通过two页面发送数据给服务器,服务器把数据传送给one页面 在two 中发送数据,在one中显示 router/index.js var axi ...

  8. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  9. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

随机推荐

  1. SQL奇技淫巧

    1.SQL行列转换 问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93李四 语文 74李四 数学 84李四 物理 94想变成(得到如下结果): 姓名 ...

  2. 来一轮带注释的demo,彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

  3. 一、JavaSE语言概述

    1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言 第二代:汇编语言 第三代语言:高级语言(面向过程-面向对象) 4.jav ...

  4. 关于微信小程序,一些想法

    不负众望,小程序终于在昨天1月9日正式上线,从凌晨微信公开课发布了微信<一月九日,一年之约>到现在,整整一天的时间,朋友圈.自媒体平台都在不断的发着关于小程序的各种文章,"APP ...

  5. JavaWeb一小时急速入门总结反思

    0.条件一个可以开发javaee的开发工具1.配置首先需要下载tomcat,用来跑javaweb的服务器,下载后自行百度配置.然后需要servlet.jar包,其实就是一个java网络层api包2.基 ...

  6. Angular5系列教程:ng-book2-angular-5-r66 土家翻译,话糙理不糙

    嗯, 在工作还辣么忙之时,看了这本书,感觉很不错.想分享给国内朋友们.结合自己的理解和整理加翻译,可能有点糙,但是,话糙理不糙嘛.出系列,不知道会不会弃坑,不立Flag了.持续更新.....我会放在印 ...

  7. 从开源项目看python代码注释

    最近看了不少代码,也写了不少代码,所以在看和写之间发现了很多的问题,真的是很多,至少从我的认识来看,有几个地方有很大的改进空间,这里不准备把所有的问题都列举出来,所以就先挑选一个比较明显得来和大家聊聊 ...

  8. 3.移植uboot-使板卡支持nor、nand

    在上一章,我们添加了nor,nand启动后,uboot启动出如下图所示: 上面的Flash: *** failed *** 是属于uboot第二阶段函数board_init_r()里的代码, 代码如下 ...

  9. 深入理解cookie和session

    cookie和session在java web开发中扮演了十分重要的作用,本篇文章对其中的重要知识点做一些探究和总结. 1.cookie存在于浏览器 随意打开一个网址,用火狐的调试工具,随意选取一个链 ...

  10. css实现连续的图像边框

    有时我们想把一个图片应用为边框,而不是背景,最简单的办法是使用两个HTML元素,一个元素用来把我们的石雕图片设置为背景,另一个元素用来存放内容,并设置纯白背景,然后覆盖在前者之上,这个方法需要一个额外 ...