您现在的位置:首页 --> JavaScript --> 跨域请求的iframe解决方案(1)
跨域请求的iframe解决方案(1)
浏览:5385次 出处信息
跨域的解决方案有许多种,就不一一介绍了,在这里主要总结一下用iframe来解决跨域的方法。
首先,说明一下window.name这个属性,我们要用这个属性来保存从服务器返回的数据。
- window.name的值在同一浏览器窗口加载不同的页面后依然存在。(比如在同一浏览器窗口下,先访问页面a.html,将window.name设定为”Hello World”,然后再访问b.html,window.name仍然是”Hello World”。)
- window.name最多可以支持2MB的值。
接下来结合代码来说明这个解决方案。为了实现跨域访问,当然要找到两个不同的域,最简单的,用http://localhost/和http://127.0.0.1/就可以了。新建一个client.html并假定其在http://localhost/这个域下面,用来向http://127.0.0.1/域下的页面server.html发送异步请求。下面是发送请求的代码:
以下是代码片段: var iframe1 = document.createElement("iframe"); iframe1.src = "http://127.0.0.1/server.html"; (function() { // 当iframe加载完之后触发的函数 function iframe1_load() { } // 在IE下要用attachEvent来添加iframe的onload事件 if(iframe1.attachEvent) { iframe1.attachEvent("onload", function(){ iframe1_load(); }); } else { iframe1.onload = iframe1_load; } })(); document.body.appendChild(iframe1); |
根据上面的分析,在http://localhost/下建一个新的页面empty.html(不用往里添加代码,只要保证不404就好。),在iframe1_load函数中先把iframe1导航到http://localhost/empty.html,然后再从iframe1的window.name里取数据。注意,iframe1导航到新页面之后浏览器会再次调用iframe1_load,从而造成死循环,所以还要加个标记。
server.html的代码
以下是代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Server</title> <script type="text/javascript"> window.name = "HELLO WORLD"; </script> </head> <body> </body> </html> |
建议继续学习:
- iframe大小自适应 (阅读:8790)
- iframe里src="about:blank"的问题。 (阅读:6839)
- 优雅绝妙的Javascript跨域问题解决方案 (阅读:6732)
- jQuery中getJSON跨域原理详解 (阅读:5612)
- ajax-cross-domain (阅读:4981)
- BO报表系统嵌入Iframe在firefox下的错误修改 (阅读:4619)
- ie下iframe输入框焦点丢失解决方案 (阅读:4282)
- 利用跨域资源共享(CORS)实现ajax跨域调用 (阅读:4141)
- 研究ext发现ajax跨域实现 (阅读:3733)
- 三谈Iframe自适应高度 (阅读:3625)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:跨域请求的iframe解决方案(2) >>
文章信息
- 作者:小寒 来源: 记事本
- 标签: iframe 跨域
- 发布时间:2010-07-27 23:29:03
建议继续学习
近3天十大热文
- [69] 如何拿下简短的域名
- [67] Go Reflect 性能
- [63] Oracle MTS模式下 进程地址与会话信
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [57] android 开发入门
- [55] 视觉调整-设计师 vs. 逻辑
- [48] 界面设计速成
- [47] 读书笔记-壹百度:百度十年千倍的29条法则