note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象

iframe中取得主窗体

window.top (顶级窗口的window对象)

window.parent (当前iframe的父窗体window)

多层嵌套的iframe window.parent.parent....来取

取得需要的window后可进行操作父文档的内容

如: window.top.document.getElementById(''xxx");

主窗体中取得iframe所属的window对象

window.frames['iframe的名字']    (通过iframe上的name属性)

document.getElementById("HtmlEdit").contentWindow;  (通过原生的方式,所有主要浏览器都支持 contentWindow 属性)

示例:

<iframe  ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">

</iframe>

参考: http://blog.csdn.net/dongzhiquan/article/details/5851201

如(主窗口中操作iframe刷新):

document.getElementById('FrameID').contentWindow.location.reload(true);

也可以直接jquery操作attr刷新: $('#frameID').attr('src','http://xxx');

浏览器同源策略:1.不能通过ajax的方法去请求不同源中的文档 2.浏览器中不同域的框架之间是不能进行js的交互操作的

如果iframe涉及到跨域,这时进行iframe window对象的操作会访问受限

chrome提示:

Uncaught SecurityError: Blocked a frame with origin "http://123.57.6.131" from accessing a frame with origin "http://localhost:9000". Protocols, domains, and ports must match.

firefox提示:

Permission denied to access property "xxx"

这里有两种情况,

1.子级域名之间跨域

2.完全不同域名跨域

1.子级域名之间跨域操作,指定相同的document.domain即可

如:

http://www.example.com/a.html 和  http://example.com/b.html
这两个页面的document.domain都设成相同的域名就可以了  example.com
只能把document.domain设置成自身或更高一级的父域,且主域必须相同,然后即可无阻访问,进行相应操作

2.完全不同域的情况,传值 (通过iframe所属的window对象的location.hash传值)

2.1 主窗体传值给iframe

由于操作location.hash不会造成整个iframe的重载刷新,所以可以这样操作,然后在iframe中监听onhashchange事件

如:

//主窗体中传递json数据到iframe:
var url;
var data = {name:'xx',age:26};
var tmp = encodeURI( JSON.stringify(center) );
$('#iframe_id').attr('src',url+'#'+tmp); //iframe中接收
window.onhashchange = function () {
var hash_str = decodeURI( window.location.hash.replace('#','').toString() );
var data = JSON.parse( hash_str );
} // 这样一旦当url hash值改变,iframe就可以进行相应调整
// 如果要兼容ie8之类不支持onhashchange事件的浏览器
// 可以用setInterval()判断是否发生改变,然后调用相应函数

参考: http://stackoverflow.com/questions/3090478/jquery-hashchange-event

2.2 iframe中传递给主窗体

需要在主窗体a同域名下新建一个页面c

然后在iframe b中嵌入iframe src值为页面c,

iframe b中便可用同样的方式操作c的url hash值,

a,c同域名下即可透明访问操作, a访问c的window对象不存在跨域同源限制的问题.

3.父window 操作子iframe中的dom元素,通过子iframe的window的document对象操作

如:
var dd = $(window.frames['frame_name'].document).contents.find('a');
dd.attr('target','_self');

注意有必要放到iframe加载完成后再操作

$('#xx_content > iframe').load(function () {
...
});

iframe操作(跨域解决等)的更多相关文章

  1. JavaScript跨域解决办法

    在找到跨域解决办法之前,我们要先弄清楚一些基本概念 什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据 主域相同而子域不同 不同域名的跨域访问 什么是跨域? 简单地理解就是因 ...

  2. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

  3. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  4. 在javascript中的跨域解决

    跨域产生的原因 跨域是由浏览器的同源策略引起的,即不同源(协议,域名,端口中其中有一个不同)的js是不能读取对方的资源的.当要网站中的js要请求其他网站的数据时就会产生跨域问题,就像下面这样,浏览器会 ...

  5. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  6. ssm跨域解决

    最近挑战杯项目要交了,最后一个开发的项目,还是得好好对待,不知道会不会真香,昨天还是遇到了一些问题,尤其是对接的时候,用postman对接的时候,没有啥问题,结果前端上线对接时,发现ajax无法请求到 ...

  7. JAVA联调接口跨域解决办法

    JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...

  8. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  9. iFrame跨域解决办法

    按情境分1.不跨域时2.主域相同.子域不同时3.主域不同不跨域时访问iframe: contentWindow访问父级:parent访问顶级:top a.html <html xmlns=&qu ...

随机推荐

  1. JS常用数组方法及实例

    1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...

  2. Git 基本命令与服务器搭建

    Git教程 一套视频 详细教程 完全命令手册 Git常用命令 git config:配置相关信息 git clone:复制仓库 git init:初始化仓库 git add:添加更新内容到索引中 gi ...

  3. C语言字符篇(一)字符串转换函数

      #include <stdlib.h>   double atof(const char *nptr);  将字符串转换成双精度浮点数 int atoi(const char *npt ...

  4. Spring的注解@Qualifier

    近期在捯饬spring的注解,现将遇到的问题记录下来,以供遇到同样问题的童鞋解决~ 先说明下场景,代码如下: 有如下接口: public interface EmployeeService { pub ...

  5. POJ:1017-Packets(贪心+模拟,神烦)

    传送门:http://poj.org/problem?id=1017 Packets Time Limit: 1000MS Memory Limit: 10000K Total Submissions ...

  6. Android面试收集录9 IntentService详解

    一. 定义 IntentService是Android里面的一个封装类,继承自四大组件之一的Service. 二.作用 处理异步请求,实现多线程 三. 工作流程 注意:若启动IntentService ...

  7. Java语言基础---两变量间的交换

    使用中间变量交换两个变量的值 int a = 10 , b = 11 , m; m = a; a = b; b = m; 不使用中间变量交换两个变量的值 int a = 10; int b = 11; ...

  8. Eclipse Java 构建路径 ---Eclipse教程第13课

    Eclipse Java 构建路径 设置 Java 构建路径 Java构建路径用于在编译Java项目时找到依赖的类,包括以下几项: 源码包 项目相关的 jar 包及类文件 项目引用的的类库 我们可以通 ...

  9. 很全的 Python 面试题

    很全的 Python 面试题 Python语言特性 1 Python的函数参数传递 看两个例子:           Python   1 2 3 4 5 a = 1 def fun(a):      ...

  10. 《数据结构与算法分析:C语言描述》复习——第六章“排序”——冒泡排序

    2014.06.17 01:04 简介: 冒泡排序是O(n^2)级别的交换排序算法,原理简单,属于必知必会的基础算法之一. 思路: 排序要进行N轮,每一轮从尾部逐个向前扫描,遇到逆序对就进行交换.确保 ...