iframe操作(跨域解决等)
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操作(跨域解决等)的更多相关文章
- JavaScript跨域解决办法
在找到跨域解决办法之前,我们要先弄清楚一些基本概念 什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据 主域相同而子域不同 不同域名的跨域访问 什么是跨域? 简单地理解就是因 ...
- JavaScript跨域解决方式
平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...
- spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置
spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...
- 在javascript中的跨域解决
跨域产生的原因 跨域是由浏览器的同源策略引起的,即不同源(协议,域名,端口中其中有一个不同)的js是不能读取对方的资源的.当要网站中的js要请求其他网站的数据时就会产生跨域问题,就像下面这样,浏览器会 ...
- JavaScript跨域解决方法大全
跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...
- ssm跨域解决
最近挑战杯项目要交了,最后一个开发的项目,还是得好好对待,不知道会不会真香,昨天还是遇到了一些问题,尤其是对接的时候,用postman对接的时候,没有啥问题,结果前端上线对接时,发现ajax无法请求到 ...
- JAVA联调接口跨域解决办法
JAVA联调接口跨域解决办法 第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...
- [转]vue跨域解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...
- iFrame跨域解决办法
按情境分1.不跨域时2.主域相同.子域不同时3.主域不同不跨域时访问iframe: contentWindow访问父级:parent访问顶级:top a.html <html xmlns=&qu ...
随机推荐
- JS常用数组方法及实例
1.join(separator):将数组的元素组起一个字符串,以separator为分隔符 ,,,,]; var b = a.join("|"); //如果不用分隔符,默认逗号隔 ...
- Git 基本命令与服务器搭建
Git教程 一套视频 详细教程 完全命令手册 Git常用命令 git config:配置相关信息 git clone:复制仓库 git init:初始化仓库 git add:添加更新内容到索引中 gi ...
- C语言字符篇(一)字符串转换函数
#include <stdlib.h> double atof(const char *nptr); 将字符串转换成双精度浮点数 int atoi(const char *npt ...
- Spring的注解@Qualifier
近期在捯饬spring的注解,现将遇到的问题记录下来,以供遇到同样问题的童鞋解决~ 先说明下场景,代码如下: 有如下接口: public interface EmployeeService { pub ...
- POJ:1017-Packets(贪心+模拟,神烦)
传送门:http://poj.org/problem?id=1017 Packets Time Limit: 1000MS Memory Limit: 10000K Total Submissions ...
- Android面试收集录9 IntentService详解
一. 定义 IntentService是Android里面的一个封装类,继承自四大组件之一的Service. 二.作用 处理异步请求,实现多线程 三. 工作流程 注意:若启动IntentService ...
- Java语言基础---两变量间的交换
使用中间变量交换两个变量的值 int a = 10 , b = 11 , m; m = a; a = b; b = m; 不使用中间变量交换两个变量的值 int a = 10; int b = 11; ...
- Eclipse Java 构建路径 ---Eclipse教程第13课
Eclipse Java 构建路径 设置 Java 构建路径 Java构建路径用于在编译Java项目时找到依赖的类,包括以下几项: 源码包 项目相关的 jar 包及类文件 项目引用的的类库 我们可以通 ...
- 很全的 Python 面试题
很全的 Python 面试题 Python语言特性 1 Python的函数参数传递 看两个例子: Python 1 2 3 4 5 a = 1 def fun(a): ...
- 《数据结构与算法分析:C语言描述》复习——第六章“排序”——冒泡排序
2014.06.17 01:04 简介: 冒泡排序是O(n^2)级别的交换排序算法,原理简单,属于必知必会的基础算法之一. 思路: 排序要进行N轮,每一轮从尾部逐个向前扫描,遇到逆序对就进行交换.确保 ...