js的跨域问题和解决办法
我们在开发中，经常会遇到跨域请求数据问题，那么什么是跨域呢？跨域就是js在不用域之间的数据传输或者通信，比如你在使用ajax从另外一个域请求数据，或者你的页面引入了iframe，要从iframe中获取数据的时候，就是跨域。简单一点的说，判断是否跨域，就看协议、域名、端口，这三个中只要有一个不同，就都属于不同的域。
<script>
function do(jsondata){
//处理数据
}
</script>
<script src="http://exampleData/data.php?callback=do"></script>
由此就可以看出jsonp的原理就是利用script引入js文件，文件加载成功后执行url中指定的函数，我们需要获取的json数据将会作为参数传入。不过如果数据地址是别人的文件，自己无法操控，那么就得按照提供数据的一方的数据模式来处理。所以使用jsonp方法处理跨域，是需要服务器端的配合。
也可以使用jquery封装$.getJSON()的方法,这个方法很便利，看一下代码：
<script>
$.getJSON('http://exampleData/data.php?callback=?’,function(jsondata）{
//处理数据
})；
</script>
jquery会自动生成一个全局函数来替换callback=?中的问号，获取到数据后又会自动销毁。$.getJSON方法会自动判断是否跨域，不跨域，就调用普通的ajax方法；跨域，则会以异步加载js文件的形式来调用jsonp的回调函数。
二、使用window.name解决跨域
window.name的性质是，在一个窗口的生命周期内，窗口载入的所有页面都是共享一个name，而且对name都有读写的权限。而且name并不会因为有新页面的载入而重置，是一直存在在窗口中的。即使是在一个页面中载入了另外一个不同域的页面，这个name的值只要之前没有修改，那也是不会变的。
那么就可以利用这特性来解决跨域问题。
比如从www.example.com/a.html中获取www.data.com/b.html中的数据,我们可以用一个隐藏的iframe标签来加载b页面，再在a页面里获取iframe的数据。
首先要在b.html中设置一下：
<script>
window.name="a页面需要获取的json数据或者字符串"；
</script>
a.html中的代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>解决跨域问题</title>
<style type="text/css">
#ifarme{
display:none;
}
</style>
</head>
<body>
<iframe src="http://www.data.com/b.html" frameborder="0" onload="getData()" id="ifarme"></iframe>
</body>
<script type="text/javascript">
function getData(){
var iframe = document.getElementById("iframe");
iframe.onload = function(){
var data = iframe.contentWindow.name;
console.log(data);
}
ifarme.src="about:blank";//这里的src的页面可以随意设置为与a.html同源的页面，空白页about:blank也行。只有同源，a.html才能访问到iframe里面的东西。
}
</script>
</html>
跨域的原理基本就是这样，可以根据自己的需求改写封装。作为数据中转的ifame，可以在获取完数据之后销毁。
js的跨域问题和解决办法的更多相关文章
- WebApi2跨域问题及解决办法
跨域问题产生的原因 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议, ...
- [转]JavaScript跨域总结与解决办法
转载自http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html仅用作个人读书笔记. 什么是跨域 1.document.domain+ ...
- JavaScript跨域总结与解决办法
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- JavaScript跨域总结与解决办法(转)
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...
- JavaScript跨域总结与解决办法 什么是跨域
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- window.name实现的跨域数据传输 JavaScript跨域总结与解决办法
原文地址: http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m4 什么是跨域 1.document.domain+ifr ...
- JavaScript跨域总结与解决办法（转）
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- JavaScript 跨域总结与解决办法
什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...
- AJAX 跨域请求的解决办法：使用 JSONP获取JSON数据
由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...
随机推荐
- eclipse （android环境搭建）
如何安装java环境 http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html eclipse安装教程 http://jingyan ...
- HUST软测1504班第2周作业成绩：WordCount
说明 本次公布的成绩为第2周个人作业WordCount的结果: 第2周个人作业:WordCount 如果同学对作业结果存在异议,可以: 在毕博平台讨论区的第2周作业第在线答疑区发帖申诉. 或直接在博客 ...
- css实现水平伸缩菜单
ul li a{transition:width 500ms ease;} a:hover{width:*;} 高度向上延伸用height:*;margin-top:-*px;//负值实现向上
- smarty类与对象的赋值与使用
<?phprequire_once('../smarty/Smarty.class.php'); //配置信息$smarty=new Smarty(); $smarty->left_del ...
- composer 更新
composer self-update --preview 清除缓存 composer clearcache
- eclipse插件svn图标详细含义
链接:http://pan.baidu.com/s/1qYSFfTq 密码:ez8p
- Cocosd-x-2.2.2 & VS2012 & Eclipse 开发环境搭建
1.安装软件: 1.1 安装JDK(JDK1.7.0_51) JAVA_HOME C:\Program Files\Java\jdk1..0_51 CLASSPATH .;%JAVA_HOME%\li ...
- chattr命令锁定账户敏感文件
有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的linux ...
- vs2008编译opencv，不能copy CMakeVSMacros2.vsmacros
由于学习opencv,要查看源码文件,所以要先对opencv进行编译,可悲的是出错了 “不能copy CMakeVSMacros2.vsmacros” 通过上网查找资料,之所以出现这种情况,是因为 ...
- ArcGis Android 10.2.6更新文档翻译
ArcGis Android 10.2.6更新文档翻译 @[ArcGis Android|10.2.6|更新文档] 本文描述了ArcGIS Runtime SDK for Android 10.2.6 ...