标签：跨域 script name 问题 window JSONP 页面
当我们在页面中通过ajax 请求其他服务器数据时，由于浏览器对于JavaScript的同源策略，客户端就会发生跨域问题。所谓同源策略，指的是一段脚本只能请求来自相同来源（相同域名，端口号，协议）的资源。
如果上面XMLHttpRequest请求的服务地址与当前文件不同源的话，浏览器就会出现错误：
那么如何解决这类跨域问题？
（1）利用CORS跨域
“跨域资源共享”（Cross-origin resource sharing,简称CORS）。CORS是在XHR2中拓展能力，使用方法很简单，在服务端设置：
Header set Access-Control-Allow-Origin *
这种设置将接受所有域名的跨域请求，也可以指定具体网址，也可以对域名进行限定：
Header set Access-Control-Allow-Origin http://www.test.com
然而，这种方式的局限性在于要求客户端支持，并且服务端进行相关设置。在这两者满足的条件下，进行CORS进行跨域不仅支持所有类型的HTTP请求，而且开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
（2）利用JSONP实现跨域
对于较老的浏览器，它们往往不支持CORS，因此使用JSONP进行跨域也是很常见的一种方式。
JSONP实现的原理如下：
123456789101112131415161718 | funciton getJSONP(url,callback){ var funcName = getUniqueName(); //利用时间戳或者自增计数器获得唯一函数名 url += "?callback" + funcName; //将函数名作为参数添加至url中 var script = document.createElement('script') //动态构建script标签 getJSONP[funcName] = function(response){ try{ callback(response) //处理响应数据 } finally{ //即使回调函数或响应抛出错误，清除动态增加内容 delete getJSONP[funcName]; script.parentNode.removeChild(script) } } //触发HTTP请求 script.src = url; document.body.appendChild(script);} |
JSONP也存在一些弊端，首先JSONP支持GET不支持POST方法，另外使用script元素进行Ajax请求，这意味着允许web页面可以执行远程服务器发送过来的任何JavaScript代码，因此对于不信任的服务器，不应该采用该技术。
（3）利用window.name进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置，因此可以借助window.name在不同源的页面中传递数据
如www.a.com/a.html想要获得www.b.com/b.html中的数据，原理如下
1）在b.html中将数据存储在window.name中
2）在a.html中构建一个隐藏（display：none）的iframe标签，假设id设为proxy,src设置位h和a.html同源即可。
3）通过如下代码在a.html中获取到data
1234 | var proxy = document.getElementById('proxy');proxy.onload = function(){ var data = proxy.contentWindow.name; //获取到数据} |
4) 移除相关元素
（4）使用window.postMessage进行跨域
这种方式比较简单，在a页面中利用windowObj.postMessage(message,targetOrigin)向目标页面发送信息，而在b页面中通过监听message事件获取信息。这种方式是在HTML5中新增的方法，对于IE6，IE7等老版本浏览器无法使用。
标签：跨域,script,name,问题,window,JSONP,页面 来源： https://www.cnblogs.com/sanxiandoupi/p/11632220.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。