常用关于 JavaScript 中的跨域访问方法_fgfdgfdg该方法大概_dddsfdfgfdgfdg的博客-程序员宅基地

技术标签： jsonp xmlhttprequest generator json iframe jquery javascript

JS中的跨域是受到限制的，但是跨域有时候又是必须的，藉此，各种高手牛人想尽办法使得JS能够跨域获取数据，有的方法真的很巧妙

在此记录一下常用的三种跨域方法，如下：

一、不同子域名之间的(a.example.com|b.example.com)的跨域访问。

　　这种跨域调用比较常见，比如a.example.com 下的 a.htm 页面，需要调用 b.example.com 下的 b.htm页面里面的getData函数，首先需要在a.htm页面中用iframe 框架把b.htm页面引用进来

<iframe id="b" src="http://b.example.com/b.htm" frameborder="on"></iframe>

然后同时在a.htm页面与b.htm页面中设置：document.domain = "example.com"; 这样a.htm就可以获取b.htm中的window documet 然后来获取b.htm中的数据getData了，获取b.htm中的document方法为：

function getIframeDocument(id){
    returen document.getElementById(id).contentDocument || document.getElementById(id).document;
}

二、不同域名之间的hash传递参数（www.a.com | www.b.com）

　　常见的一个例子就是iframe自动适应大小，a域名下的a.htm 框架（iframe）了b域名中的b.htm,而b.htm的大小是不固定的，这时候就需要通过跨域传递b.htm的宽度与高度到a.htm中。

　　这个参数是怎么传递的呢？是通过hash来传递的(www.b.com/b.htm#width|height)其中#号后面的参数width|height 即为window.location.hash的值

而改变hash的值也不会造成页面的跳转，但是这样还是跨域的，所以需要在a域下增加一个c.htm中间页面，这样c.htm与a.htm之间就是相同的域下，可以传递数

据，把c.htm页面通过iframe到b.htm中，由b.htm控制，看下图：现在的关系为，a.htm中iframe加入了b.htm，b.htm页面中iframe加入了c.htm

　　a.htm代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo</title>
</head>
<body>
<div id="show">这是A域a</div>
<iframe id="b_iframe" src="http://www.b.com/b.htm" frameborder="on" border="1px" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" ></iframe>
</body>
</html>

b.htm代码如下：

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/c.htm" style="display:none" ></iframe>
<script type="text/javascript">
        var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth);
        var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight);
        console.log(b_width);
        var c_iframe = document.getElementById("c_iframe");
        console.log(c_iframe.src);
        c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 这里通过hash传递b.htm的宽高
        /* http://www.b.com/c.html#width|height */

</script>

c.htm代码如下：

<script type="text/javascript">
        var b_iframe = parent.parent.document.getElementById("b_iframe");//a与c是同域，可以通过parent获取到a.htm中的包含b.htm的框架的dom
        var hash_url = window.location.hash; //这里可以获取b.htm中传递过来的width|height        var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; //分别获取值
        var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
        console.log("hash_width=" + hash_width);
        console.log("hash_height=" + hash_height);

        b_iframe.style.width = hash_width; //a与c页面是同域，可以设置样式
        b_iframe.style.height = hash_height;</script>

这样就可以通过hash来传递数据，缺点是只支持string类型，大小受到限制！

三、通过jsonp来实现不通域名之间跨域传递数据。

什么是jsonp（JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用 html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。）

　　通俗来讲就是通过<script type="text/javascript" src="调用生成JS文件的地址并传递回调参数"></script> 来调用要执行的代码。

　　也可以通过createElement('script')来生成，如下：　　

var JSONP = document.createElement("script") ;//然后设置其src属性

　　因为JS文件无论在什么地方都可以调用并执行，比如各种统计JS等，回调参数是怎么回事呢，就是告诉要传递数据的页面给把数据通过这个函数传递给我，大家

大家可以试一下下面这个地址：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

上面的地址是flicker的API，其中的jsoncallback=? 中的问号替换成你自定义的回调函数，然后对方就会通过这个回调函数给你传递数据：

比如随便起名一个回调函数vvgcallback：

http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=vvgcallback

然后对方生成的js就是这样的(可以把以上地址复制到地址栏测试)：

vvgcallback({
        "title": "Recent Uploads tagged cat",
        "link": "http://www.flickr.com/photos/tags/cat/",
        "description": "",
        "modified": "2012-08-15T06:07:40Z",
        "generator": "http://www.flickr.com/",
        "items": [
       {
            "title": "A squirell about to jump",
            "link": "http://www.flickr.com/photos/64477042@N00/7786494040/",
            "media": {"m":"http://farm9.staticflickr.com/8422/7786494040_a7a506dfdc_m.jpg"},
            "date_taken": "2012-08-10T15:19:40-08:00",
            "description": " <p><a href=\"http://www.flickr.com/people/64477042@N00/\">Dr arun kapoor<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/64477042@N00/7786494040/\" title=\"A squirell about to jump\"><img src=\"http://farm9.staticflickr.com/8422/7786494040_a7a506dfdc_m.jpg\" width=\"240\" height=\"191\" alt=\"A squirell about to jump\" /><\/a><\/p> <p><\/p>",
            "published": "2012-08-15T06:07:40Z",
            "author": "[email protected] (Dr arun kapoor)",
            "author_id": "64477042@N00",
            "tags": "barcelona china california birthday christmas city family flowers blue autumn friends england blackandwhite bw food dog baby india house holiday chicago canada black france flower color berlin green bird art fall film beach halloween church girl car fashion birds animals bike festival architecture clouds cat canon germany garden de geotagged fun graffiti hawaii dance football concert asia europe day florida band australia iphone instagramapp"
       },
       {
            "title": "catkeywest",
            "link": "http://www.flickr.com/photos/marshawheatley/7786461540/",
            "media": {"m":"http://farm8.staticflickr.com/7120/7786461540_5e3e28bd3a_m.jpg"},
            "date_taken": "2012-08-14T22:57:21-08:00",
            "description": " <p><a href=\"http://www.flickr.com/people/marshawheatley/\">MarshaWheatley<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/marshawheatley/7786461540/\" title=\"catkeywest\"><img src=\"http://farm8.staticflickr.com/7120/7786461540_5e3e28bd3a_m.jpg\" width=\"240\" height=\"180\" alt=\"catkeywest\" /><\/a><\/p> ",
            "published": "2012-08-15T06:08:53Z",
            "author": "[email protected] (MarshaWheatley)",
            "author_id": "85010317@N04",
            "tags": "old cat town florida keywest"
       }]
})

就相当与在页面执行vvgcallback()函数，括号中间的就是传递的JSON数据。这样就想当于在你的页面里面执行了以上的代码。从而实现了跨域传递数据。

本文链接：https://blog.csdn.net/w627782664/article/details/7869044

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Hanlp等七种优秀的开源中文分词库推荐_weixin_33905756的博客-程序员宅基地

中文分词是中文文本处理的基础步骤，也是中文人机自然语言交互的基础模块。由于中文句子中没有词的界限，因此在进行中文自然语言处理时，通常需要先进行分词。纵观整个开源领域，陆陆续续做中文分词的也有不少，不过目前仍在维护的且质量较高的并不多。下面整理了一些个人认为比较优秀的中文分词库，以供大家参考使用。1、HanLP —— 汉语言处理包HanLP是一系列模型与算法组成的NLP工具包，..._hanlp实体推荐

python-京东扫码登录_c#京东扫描登录_小柠檬_的博客-程序员宅基地

python-京东扫码登录源码#-*- coding = utf-8 -*-#Time : 2021/2/9 #Author : 小柠檬#File : 京东扫码登录.pyimport requestsfrom PIL import Imageimport timeimport redef timer(): #输出时间 t = time.strftime('%H:%M:%S') return tdef loginQrCode(): #获取登录二维码 _c#京东扫描登录

[Pytorch框架] 4.2.3 可视化理解卷积神经网络_YEGE学AI算法的博客-程序员宅基地

文章目录4.2.3 可视化理解卷积神经网络背景基于Deconvolution的方法基于Backpropagation的方法Guided-BackpropagationCAM（Class Activation Map）Grad-CAM%load_ext autoreload%autoreload 2import torchimport numpy as npimport torch.nn as nnimport torch.nn.functional as Ffrom PIL import Im

师兄刷题笔记、算法小抄、面试突击版必备资源，帮你走上人生巅峰_谷歌师兄的算法小册_Big sai的博客-程序员宅基地

前言最近有很多朋友问我刷题、面试有没有什么好的资源。今天就给大家找了三个棒的开源资源，内容非常硬核，很多人靠着它进了大厂。不绕弯子，三个分别是谷歌师兄《谷歌大佬的刷题笔记》，东哥《labuladong的算法小抄》，Guide哥的《Java面试突击版》。三位大佬都是我很钦佩之人，他们把自己整理的东西开源分享，太赞了，我这边帮大家搜集到pdf版本可以直接观看。本来想在csdn上上传资源大家可以直接下载的，但是版权问题不允许，那这些开源资源pdf文件只能通过百度云方式给大家分享了。三份资源可以直接微信搜一_谷歌师兄的算法小册

swagger2集成springMvc生成在线API_requestbody swagger2_猿人小郑的博客-程序员宅基地

在现在的开发中，前后端分离开发越来越明显，也越来越重要，但是后台开发人员在开发完接口之后给前端人员或者APP端调用，而前端人员或者APP端对接口的作用以及接口中的参数往往不懂，这样双方不得不多次沟通交流，很浪费时间。于是就需要一个中间的工具来无缝连接后台与前端。这个中间工具就是今天的主角Swagger。Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful_requestbody swagger2

python-datetime.strftime(),datetime.strptime(),timedelta，获取指定日期前n天的日期-程序员宅基地

获取7天前，格式为字符类型的日期获取在字符日期20210713前7天的日期

随便推点

C语言来实现字符串反转只有单词顺序反转，单词里的字母不反转_丁低调的博客-程序员宅基地

题目：输入一个英文句子，翻转句子中单词的顺序，但单词内字符的顺序不变。句子中单词以空格符隔开。标点符号和普通字母一样处理。例如输入“student. a am I”，则输出“I am a student.”。思路：先将字符串整体翻转一遍，此时单词之间的顺序是翻转了，可是单词内部的顺序也翻转了，所以在一个个单词处理，将单词重新翻转过来。1.student. a am I-

ELK架构介绍_程序员劝退师-TAO的博客-程序员宅基地

1、核心组成ELK是一个应用套件（应用套件就是多款软件组合）,由Elasticsearch, Logstash和Kibana三部分组件组成,简称ELK;它是一套开源免费、功能强大的日志分析管理系统。ELK可以将我们的系统日志、网站日志、应用系统日志等各种日志进行收集、过滤、清洗,然后进行集中存放并可用于实时检索、分析。这三款软件都是开源软件,通常是配合使用,而且又先后归于Elastic.co公司名下,故又被简称为ELK Stack。也就是能够收集多台服务器产生的日志数据的聚合套件！下图是ELK Stack的_elk架构