javascript跨域的方法汇总

2024-07-28 19:23:25

此文章学习借鉴了一些其他前端同学的文章，自己做了个实践总结

以下的例子包含的文件均为为 http://www.a.com/a.html 、http://www.a.com/c.html 与 http://www.b.com/b.html，要做的都是从a.html获取b.html里的数据

1.JSONP

jsonp是利用script标签没有跨域限制的特性，通过在src的url的参数上附加回调函数名字，然后服务器接收回调函数名字并返回一个包含数据的回调函数

  function doSomething(data) {
    // 对data处理
  }
  var script = document.createElement("script");
  script.src = "http://www.b.com/b.html?callback=doSomething";
  document.body.appendChild(script);

  // 1.生成一个script标签，将其append在body上，向服务器发出请求
  // 2.服务器根据 callback 这个参数生成一个包含数据的函数 doSomething({"a", "1"})
  // 3.页面事先已声明doSomething函数，此时执行 doSomething(data) 这个函数，获得数据

2.HTML5的postMessage

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.html

  window.onload = function() {
    window.addEventListener("message", function(e) {
      alert(e.data);
    });

    window.frames[0].postMessage("b data", "http://www.b.com/b.html");
  }

b.html

  window.onload = function() {
    window.addEventListener("message", function(e) {
      alert(e.data);
    });
    window.parent.postMessage("a data", "http://www.a.com/a.html");
  }

这样打开a页面就先弹出 a data,再弹出 b data

3.window.name + iframe

window.name的原理是利用同一个窗口在不同的页面共用一个window.name，这个需要在a.com下建立一个代理文件c.html,使同源后a.html能获取c.html的window.name

a.html

  var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 现在a.html里建一个引用b.html的iframe，获得b的数据

  var flag = true;
  iframe.onload = function() {
    if (flag) {
      iframe.src = "c.html";
// 判断是第一次载入的话，设置代理c.html使和a.html在同目录同源，这样才能在下面的else取到data
      flag = false;
    } else { // 第二次载入由于a和c同源，a可以直接获取c的window.name
      alert(iframe.contentWindow.name);

      iframe.contentWindow.close();
      document.body.removeChild(iframe);
      iframe.src = '';
      iframe = null;
    }
  }

b.html

window.name = "这是 b 页面的数据";

4.window.location.hash + iframe

b.html将数据以hash值的方式附加到c.html的url上，在c.html页面通过location.hash获取数据后传到a.html(这个例子是传到a.html的hash上，当然也可以传到其他地方)

a.html

  var iframe = document.createElement("iframe");
  iframe.src = "http://www.b.com/b.html";
  document.body.appendChild(iframe); // 在a页面引用b
  function check() { // 设置个定时器不断监控hash的变化，hash一变说明数据传过来了
    var hashs = window.location.hash;
    if (hashs) {
      clearInterval(time);
      alert(hashs.substring(1));
    }
  }
  var time = setInterval(check, 30);

b.html

  window.onload = function() {
    var data = "this is b's data";
    var iframe = document.createElement("iframe");
    iframe.src = "http://www.a.com/c.html#" + data;
    document.body.appendChild(iframe); // 将数据附加在c.html的hash上
  }

c.html

// 获取自身的hash再传到a.html的hash里，数据传输完毕
parent.parent.location.hash = self.location.hash.substring(1);

5.CORS

CORS是XMLHttpRequest Level 2 里规定的一种跨域方式。在支持这个方式的浏览器里，javascript的写法和不跨域的ajax写法一模一样，只要服务器需要设置Access-Control-Allow-Origin: *

6.document.domain

这种方式适用于主域相同，子域不同，比如http://www.a.com和http://b.a.com
假如这两个域名下各有a.html 和b.html,

a.html

  document.domain = "a.com";
  var iframe = document.createElement("iframe");
  iframe.src = "http://b.a.com/b.html";
  document.body.appendChild(iframe);
  iframe.onload = function() {
    console.log(iframe.contentWindow....); // 在这里操作b.html里的元素数据
  }

b.html

  document.domain = "a.com";

注意：document.domain需要设置成自身或更高一级的父域，且主域必须相同。

Javascript跨域请求的4种解决方式

什么情况下才会出现跨域? 假设域名是:http://www.example.com.cn/ 如果所请求的域名跟这个域名不致,这种情况就是跨域,由于跨域存在漏洞,所以一般来说正常的跨域请求方式是请求不到的. 解决方式: 一.window.name 1. 服务器返回复制代码代码如下: <script>window.name='{"id":"3", "name":"leisure"}';</script>
JavaScript使用HTML5的window.postMessage实现跨域通信例子

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动
Javascript 跨域访问解决方案

这里分两类情况:一.基于同一父域的子域之间页面的访问:参见如下3个domain域:taobao.com.jipiao.taobao.com.promotion.taobao.com:它们有相同的父域taobao.com.二.基于不同父域页面之间的访问:参见如下3个domain域:taobao.com.baidu.com.sina.com.cn:它们具有不同的父域. 解决它们之间跨域的方案有:方案1:服务器Proxy域A的页面JS需要访问域B下的链接获取数据,该方案在域A的服务器端建立一个Prox
关于JavaScript跨域问题及实时刷新解决方案

在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 复制代码代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax({ url: "http://www.rj99999.com/Price/ListPrice.html", dataType: 'html', success: function (data, textS
AJAX javascript的跨域访问执行

突然感觉就是这里的问题,研究一下,搞定后其实觉得挺容易的,只是自己知识还是有些欠缺,解决方法如下: 阻塞的AJAX请求我们先来证实一下请求的阻塞情况吧.我们使用如下的代码: 连续发起三个请求复制代码代码如下: function simpleRequest() { var request = new XMLHttpRequest(); request.open("POST", "Script.ashx"); request.sen
javascript跨域方法、原理以及出现问题解决方法（详解）

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实
javascript使用window.name解决跨域问题第1/2页

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:<Session variables without cookies>),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo(dojox.io.windowName),用来解决跨域数据传输问题.window.name 传输技
javascript跨域的方法汇总

此文章学习借鉴了一些其他前端同学的文章,自己做了个实践总结以下的例子包含的文件均为为 http://www.a.com/a.html .http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.html获取b.html里的数据 1.JSONP jsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数名字并返回一个包含数据的回调函数 function doSomething(
常见的javascript跨域通信方法

本文主要介绍几种常见的javascript跨域通信方法.首先讲解一下JSONP. 1.JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其
javascript实现跨域的方法汇总

由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval). 方法一: 利用script标签请求(<script src="http://
5种处理js跨域问题方法汇总

前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox
JavaScript跨域方法汇总

做Web开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于http://www.a.com/1.html来说: 1.http://www.a.com/2.html是同源的: 2.https://www.a.com/2.html是不同源的,原因是协议不同: 3.http://www.a.com:8080/2.html是不同源的,原因是端口不同: 4.http://sub.a.com/2.html是不同源的,原因是主机不同. 在浏览器中,<script>.<img
JavaScript 跨域之POST实现方法

javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了. 此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 postMessage 来向调用者返回值. 第一步,我们先实现一个接受 jsonp 的后端代码,至于用什么语言实现,各位自已决定. c#代码是: protected void Page_Load(object sen
javascript跨域请求包装函数与用法示例

本文实例讲述了javascript跨域请求包装函数与用法.分享给大家供大家参考,具体如下: 一.源码 // 定义AJAX跨域请求的JSON (function(){ if(typeof window.$JSON== 'undefined'){ window.$JSON= {}; }; $JSON._ajax = function(config){ config = config[0] || {}; this.url = config.url || ''; this.type = config.t
javascript跨域原因以及解决方案分享

产生跨域问题的原因跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性. 跨域问题产生的场景当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误.这种场景下就要解决js的跨域问题. XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header
JavaScript跨域调用基于JSON的RESTful API

1. 基本术语 AJAX(Asynchronous JavaScript And XML,异步JavaScript和XML):AJAX是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. JSON(JavaScript Object Notation):JSON是一种轻量级的数据交换格式,可以看成是由大括号包裹起来的多个"key/value"对,格式如下:{"f

javascript跨域的方法汇总

相关推荐

随机推荐