前端跨域解决方法之window.name+iframe
来源:互联网 发布:161和162端口 编辑:程序博客网 时间:2024/06/04 19:02
window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:《Session variables without cookies》),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo (dojox.io.windowName),用来解决跨域数据传输问题。
首先,我们要知道关于window.name的这样一个特性:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。换句话说,name属性不会因为页面的url变化而变化,这就给跨域提供了机会。
我们可以在源页面中利用iframe标签嵌套要请求的目标页面,在目标页面设置window.name属性,即把要请求的信息赋给window.name。但是问题来了,两个页面处于不同域,源页面并不能获得目标页面的name值,因为name值只对位于同一域中的页面是可见的。此时,我们需要将iframe导航回与源页面处于同一域中air.html页面(即一个空页面,在这里充当一个中转的角色),上面说了这时候的name值依旧保持不变,那么我们就可以获取到它了。
示例代码:
http://www.a.com/origin.html如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script>function getData ( url, fn ) {var oIframe = document.createElement('iframe'),firstBtn = true,loadFn = function () {if ( firstBtn ) {//导航回同一域下的air.html,以便获取到name值oIframe.contentWindow.location = 'http://www.a.com/air.html';firstBtn = false;} else {fn( oIframe.contentWindow.name );oIframe.contentWindow.document.write('');oIframe.contentWindow.close();document.body.removeChild(oIframe);oIframe.src = '';oIframe = null;}};oIframe.src = url;//1.第一次iframe加载完毕触发事件,执行loadFn函数,会将iframe导航回air.html//2.air.html加载完毕后又会触发事件,再次执行loadFn函数,此时会走elseif ( oIframe.attachEvent ) {oIframe.attachEvent( 'onload', loadFn );} else {oIframe.onload = loadFn;}document.body.appendChild(oIframe);}//页面加载完毕后调用getData函数去获取数据window.onload = function () {getData( 'http://www.b.com/target.html', function ( data ) {console.log( data );} );}</script></head><body></body></html>
http://www.b.com/target.html如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>window.name = '想要获取的信息';</script></body></html>
0 0
- 前端跨域解决方法之window.name+iframe
- 跨域解决方法之window.name
- window.name + iframe 实现跨域
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)
- 改编版iframe 跨域问题 。window.name方式 postMessage 。。。。。。。。。
- 跨域--window.name + iframe
- 前端复习--window.name跨域完全搞定
- iframe 中使用 window.name
- 跨域请求之三:window.name解决跨域
- window.name实现跨域
- Window.name实现跨域
- js跨站之 window.name方法
- 【前端知识点】跨域之跨域window.postMessage
- 利用window.name解决跨域问题
- 实战window.name解决跨域问题
- window.name实现的跨域数据传输
- OC block 简单应用
- leetcode-java-103. Binary Tree Zigzag Level Order Traversal
- HDU Problem 1203 I NEED A OFFER! 【01背包】
- 使用Java发送HTTP发送POST、GET请求
- 【模板】树的直径
- 前端跨域解决方法之window.name+iframe
- 【CDP-云设计模式】第7章,3.内存中DB缓存模式(Inmemory DB Cache Pattern)
- win10登陆界面如何截屏
- hdoj-1869 六度分离
- 【算法分类】【搜索】【DFS】枚举所有子集
- Photoshop快捷键大全
- 学英语
- smartforms 条形码打印
- 对数组的理解