我们在开发中,经常会遇到跨域请求数据问题,那么什么是跨域呢?跨域就是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. JS中立即执行函数的理解

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: U ...

  2. 公司web安全等级提升

    目录 背景介绍 目录 针对国调的初次测试结果 解决方案 二次测试 关于XSS 什么是XSS 基本防御 代码防御 xss代码辑录 说明 参考文章 版本记录 背景介绍 公司的一个web数据展示系统,本来是 ...

  3. android多lib库工程的自动批量构建--编写ant脚本

    基本配置--build.properties 首先编写基本配置build.properties ,主要配置如下: android sdk所在目录 编译项目所使用的项目版本 Jdk所在目录 以及签名时, ...

  4. Mysql的备份,权限与日志

    1>Mysql的数据备份    mysqldump 工具 --single-transaction 该选项导出数据之前提交一个BEGIN SQL语句,不会阻塞任何应该程序而且能保证导出数据时的一 ...

  5. set集合排序

    不仅list是有序集合,set也可以变为有序集合. /** * 给字符串时间的set排序 * @return 有序的set集合 */ public static Set getSort(){ Set& ...

  6. Android-ListView-CursorAdapter

    在上篇博客,Android-ListView-SimpleCursorAdapter,中介绍了SimpleCurosrAdapter的使用操作(SimpleCursorAdapter是简单便捷Curs ...

  7. 【架构】基于Nutch+Hadoop+Hbase+ElasticSearch的网络爬虫及搜索引擎

    网络爬虫架构在Nutch+Hadoop之上,是一个典型的分布式离线批量处理架构,有非常优异的吞吐量和抓取性能并提供了大量的配置定制选项.由于网络爬虫只负责网络资源的抓取,所以,需要一个分布式搜索引擎, ...

  8. c# Quartz.net的简单封装

    分享一个以前封装的Quartz.net类. 新建一个QuartzClass类库项目.nuget控制台输入 image.png 添加Quartz.net的引用. 我们新建一个JobBase.cs文件,里 ...

  9. ZKEACMS 自定义表单的使用

    ZKEACMS Core 2.2 已经发布了,其中主要添加了自定义表单的功能.使用自定义表单的功能,您可以在几分钟内就创建一个表单,并用它来收集一些信息.导出收集的信息,就可以做一些统计分析. 创建表 ...

  10. leecode刷题(15)-- 验证回文字符串

    leecode刷题(15)-- 验证回文字符串 验证回文字符串 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 ...