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 () {
...
});
最新文章
- JavaScript 面向对象继承的实现
- C++ STL之vector用法总结
- [译]Node.js Best Practices
- Android应用安全之外部动态加载DEX文件风险
- ORACLE SEQUENCE用法
- homework01
- Sybase datetime 时间转换格式 convert(varchar(10),字段名,转换格式)
- C语言之算数运算符
- python---数据类型---列表
- 【Java】几道常见的秋招面试题
- Spring MVC通过AOP切面编程 来拦截controller 实现日志的写入
- 【POJ2226】Muddy Fields
- vim块编辑删除、插入、替换【转】
- 获取当前最顶层的ViewController
- 使用time模块,转化时间格式
- Codeforces 808G Anthem of Berland - KMP - 动态规划
- 树莓派 ubuntu 系统下修改config.txt文件调整分辨率记录
- Win10有效降低磁盘100%读写
- 如何写出高性能SQL语句
- OpenShift和F5的集成手册
热门文章
- Pythond函数的参数使用操作注意事项
- python使用网易邮箱发邮件
- 为 dll (类库) 解决方案添加测试项目
- TouTiao开源项目 分析笔记12 从总体到局部 构建视频主页面
- [bzoj1552][Cerc2007]robotic sort&;&;[bzoj3506][Cqoi2014]排序机械臂
- 如何使用API创建OpenStack虚拟机?
- Android学习记录(7)—Intent中显示意图和隐式意图的用法
- 以+scheduledTimerWithTimeInterval...的方式触发的timer,在滑动页面上的列表时,timer会暂定回调,为什么?如何解决?
- Pascal “熊猫烧香”(骗人的)
- Vim常用指令总结(持续更新中)