js跨域问题是指在js在不同的域中进行数据传输或者数据通信，比如通过ajax向不同的域请求数据（说到ajax，不可避免的就会遇到两个问题：一是ajax是如何传递数据的？二是ajax是如何实现跨域的？），或者是js获取在页面内的不同域的框架中的数据（iframe），ifame在不同域下的js通信。

跨域的表现主要有：协议不同，主机名不同，端口号不同

比如

http://www.abc.com和https://www.abc.com属于协议不同

http://www.abc.com和http://qqq.abc.com属于主机名不同

http://www.abc.com和http://www.abc.com:80属于端口号不同

而http://www.abc.com和http://www.abc.com/list.html是属于同域下的

第一种解决跨域问题的方法是：通过jsonp

在js中，我们直接通过XMLHttpRequest请求不同域的数据是不可以的，jsonp通过引入js脚本的方式解决了这个问题，比如假设需要在a.html中通过ajax获取不同域上的json数据，假设这个json数据就在http://www.abc.com/data.php,那么可以通过以js文件的形式引入

a.html

<script>

function dosomething(jsondata) {

//这里处理获得的json数据

}

</script>

<script src="http://www.abc.com/data.php?callback=dosomething"></script>

这里的获取数据的地址后还有callback参数是惯用参数名，因为是当做js文件引入的，那么返回的也应该是js文件，所以在这个页面的php中应该是这样的

<?php

　　$callback = $_GET('callback');//得到回调函数名

　　$data = array('a','b','c');//传递的数据

　　echo $callback.'('.json_encode($data).')';//输出

?>

输出：dosomething(['a','b','c'])

因此我们可以很清楚地知道，dosomething函数就是通过http://www.abc.com/data.php?callback=dosomething返回的js文件，dosomething函数的参数是返回的json数据，这样我们就得到了跨域的数据

所以通过jsonp的方法解决跨域问题的思路是，通过script标签引入一个js文件，这个js文件载入成功后会执行url参数中指定的函数，并且会把获取的json数据当做参数传入，所以jsonp是需要服务器端页面的配合的。

jQuery可以很方便地封装jsonp

<script>

　$.getJSON("http://www.abc.com/data.php?callback=?",function(){

　　//处理JSON数据

});

</script>

jquery会自动生成一个全局函数来代替callback=?的？,与js实现的原理是一致的，之后获取到数据后，全局函数又会自动销毁，相当于一个临时代理函数的功能，

$getJSON方法可以自动判断是否跨域，如果不跨域，则按普通的ajax方法，如果跨域，就通过异步加载调用js文件来调用jsonp的回调函数。

二、document.domain

这个方法说到底就是将两个域设置成相同的域名，比如，可以把http://www.a.com和http://a.com设成相同的域名即可，但是这个设置是有条件限制的，document.domain只能设置成自身或更高一级的父域，比如b.c.a.com可以设成、b.c.a.com、c.a.com、a.com都是可以的，但是设成d.b.c.a.com是不可以的，因为这是b.c.a.com的子域，同样，设成d.com也是不可以的，因为已经是不同域了。

而且document.domain只适用于不同的子域之间的框架间的交互，如果要通过ajax方法进行跨域获取数据的话，可以在本页面设置一个隐藏的iframe来进行代理，将ifame载入跟需要获取数据的那个页面相同的域的页面，然后通过iframe获取数据，而js也可以正常的操作这个iframe，再通过document.domain方法去获取iframe里的数据就可以了。

举个例子：

在http://a.html里设置主域，

<script>

　　document.domain="a.html";//设置成主域

　　function test(){

　　　　alert("document.getElementById('iframe').contentWindow");

　　}

</script>

<body>

//载入需要获取页面的数据

　　<iframe id="iframe" src="http://b.com/data.html" onload="test()" ></iframe>

</body>

初步了解关于js跨域问题的更多相关文章

  1. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  2. 5种处理js跨域问题方法汇总（转载）

    1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...

  3. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  4. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  5. 【js跨域】js实现跨域访问的几种方式

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  7. js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  8. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  9. 三种方法实现js跨域访问

    转自:http://narutolby.iteye.com/blog/1464436 javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档 ...

随机推荐

  1. 关于volatile的可见性和禁止指令重排序的疑惑

    在学习volatile语义的可见性和禁止指令重排序的相关测试中,发现并不能体现出禁止指令重排序的特性 实验代码如下 package com.aaron.beginner.multithread.vol ...

  2. 剑指offer编程题Java实现——面试题11数值的整数次方

    题目: 实现函数double power(double base,int exponent),求base的exponent次方.不得使用库函数,同时不需要考虑大数问题. 解题思路:最一般的方法实现数值 ...

  3. angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...

  4. solr6.4.1搜索引擎同步mysql数据库

    尚未成功启动solr的,请参考我的另一篇文章:http://www.cnblogs.com/zhuwenjoyce/p/6506359.html(solr6.4.1 搜索引擎启动eclipse启动) ...

  5. MyBatis 的小细节问题

    mybatis Result Maps collection already contains value 这是个小功能,我当时没有怎么在意,后来发到了测试环境的时候测试提出了bug,我才慌忙查看原因 ...

  6. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

  7. 走进 Redis 的世界

    NoSQL(Not Only SQL) 在现今已经应用非常普遍了,尤其是 Redis 和 MongoDB.我们现在来说说 Redis. 前世 Redis 是一个意大利人 Salvatore Sanfi ...

  8. WeMall微信商城签到插件Sign的主要源码

    WeMall微信商城源码签到插件Sign,用于商城的签到系统,分享了部分比较重要的代码,供技术员学习参考 AdminController.class.php <?php namespace Ad ...

  9. 算法模板——sap网络最大流 3（递归+邻接表）

    实现功能:同前 程序还是一如既往的优美,虽然比起邻接矩阵的稍稍长了那么些,不过没关系这是必然,但更重要的一个必然是——速度将是一个质的飞跃^_^(这里面的point指针稍作了些创新——anti指针,这 ...

  10. 基于SSH协议的端口转发

    [前言] 最近一直在使用ssh协议的端口转发(隧道)功能,完成对内网空透等.这篇文章将主要讲解3种常用的ssh tunnelling使用方法和基本原理. 在介绍具体内容前,我先奉上端口转发的常用情景: ...