我们在开发中，经常会遇到跨域请求数据问题，那么什么是跨域呢？跨域就是js在不用域之间的数据传输或者通信，比如你在使用ajax从另外一个域请求数据，或者你的页面引入了iframe，要从iframe中获取数据的时候，就是跨域。简单一点的说，判断是否跨域，就看协议、域名、端口，这三个中只要有一个不同，就都属于不同的域。

 
使用XMLHttpRequest请求不同域上的数据，是不可以的。下面是解决跨域获取数据和通信的几个方法。
 
一、jsonp解决跨域问题。
 
比如你有一个页面index.html,需要从不同的域里获取json数据，数据地址为“http://exampleData.com/data.php”,那么你就可以在html页面中这样写：
 
<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的跨域问题和解决办法的更多相关文章

  1. WebApi2跨域问题及解决办法

    跨域问题产生的原因 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议, ...

  2. [转]JavaScript跨域总结与解决办法

    转载自http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html仅用作个人读书笔记. 什么是跨域 1.document.domain+ ...

  3. JavaScript跨域总结与解决办法

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  4. JavaScript跨域总结与解决办法(转)

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...

  5. JavaScript跨域总结与解决办法 什么是跨域

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  6. window.name实现的跨域数据传输 JavaScript跨域总结与解决办法

    原文地址:  http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m4 什么是跨域 1.document.domain+ifr ...

  7. JavaScript跨域总结与解决办法（转）

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  8. JavaScript 跨域总结与解决办法

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  9. AJAX 跨域请求的解决办法：使用 JSONP获取JSON数据

    由于受到浏览器的限制,ajax不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器 ...

随机推荐

  1. 实践作业4：Web测试实践（小组作业）每日任务记录1

    会议时间:2017年12月21日会议地点:东九教学楼自习区主 持 人:王晨懿参会人员:王晨懿.余晨晨.郑锦波.杨潇.侯欢.汪元记 录 人:王晨懿会议议题:小组作业熟悉和任务分配 (一)选择待测产品 我 ...

  2. HttpContext.Current.Session[strName]未将对象引用设置到对象的实例

    项目开发是在4.5.1上,不知道为啥客户提供的服务器上安装的是4.5,差别不大也没去升级,然后部署MVC的时候web.config报错 <system.web> <compilati ...

  3. JS 单例模式

    <parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...

  4. 风尘浪子 只要肯努力，梦想总有一天会实现 WF工作流与Web服务的相互调用 —— 通过Web服务调用Workflow工作流（开发持久化工作流） _转

    如果你曾经负责开发企业ERP系统或者OA系统,工作流对你来说一定并不陌生.工作流(Workflow)是对工作流程及其各操作步骤之间业务规则 的抽象.概括.描述.工作流要解决的主要问题是:为实现某个业务 ...

  5. Maven整理笔记の生命周期和插件

    项目构建的生命周期,其实软件开发人员每天都在干这个事,即项目清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等,可以说几乎所有项目的构建都可以映射到这样一个生命周期上. Maven的插件 ...

  6. Android-Style样式

    说到Style样式在,HTML+Javascript+CSS中,CSS就是样式,样式可以把很多通用到效果,统一为一个样式,达到通用的目的,也可以让代码更加简洁. 什么时候用Style样式 ? 例如:A ...

  7. nutch2.1+mysql+elasticsearch整合linux单机部署

    这次主要介绍下nutch2.1和mysql和elasticsearch的整合,是在单机上运行,并不是分布式部署.1.下载nutch2.1 nutch下载地址:http://labs.mop.com/a ...

  8. 在 Mac OSX 上安装 nginx

    今天在使用 brew 安装 nginx 时,提示错误,安装不上去: brew install nginx, 提示:/usr/local is not writable. 这个是需要修改 /usr/lo ...

  9. scrapy-redis3

    原文链接:scrapy-redis使用以及剖析

  10. CharSequence与String的区别

    CharSequence与String都能用于定义字符串,但CharSequence的值是可读可写序列,而String的值是只读序列. 原文: http://blog.csdn.net/joy_zha ...