javascript 跨域 的几种方法
1.jsonp方法
转:https://blog.csdn.net/liusaint1992/article/details/50959571
主要实现功能:
1.参数拼装。
2.给每个回调函数唯一命名。
3.在回调成功或请求失败之后删除创建的javascript标签。 需要兼容IE。IE下onerror事件不兼容。这里有对它的模拟实现。在IE下加载失败也能get到。
4.超时功能。超时取消回调。执行error。
5.error事件。可执行自己传入的error事件。
代码封装,调用,以及后台代码如下
/*author:ls <841766635@qq.com>
* data:2016/03/20
*/ function JSONP(url,config){
var data = config.data || [];
var paraArr=[],paraString='';//get请求的参数。
var urlArr;
var callbackName;//每个回调函数一个名字。按时间戳。
var script,head;//要生成script标签。head标签。
var supportLoad;//是否支持 onload。是针对IE的兼容处理。
var onEvent;//onload或onreadystatechange事件。
var timeout = config.timeout || 0;//超时功能。 for(var i in data){
if(data.hasOwnProperty(i)){
paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));
}
} urlArr = url.split("?");//链接中原有的参数。
if(urlArr.length>1){
paraArr.push(urlArr[1]);
} callbackName = 'callback'+new Date().getTime();
paraArr.push('callback='+callbackName);
paraString = paraArr.join("&");
url = urlArr[0] + "?"+ paraString; script = document.createElement("script");
script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件(IE为onreadystatechange)之前就被调用了。因此我们在正向回调执行之时,为script标签添加一个属性,然后待到onload发生时,再检测有没有这个属性就可以判定是否请求成功,没有成功当然就调用我们的error。 //将回调函数添加到全局。
window[callbackName] = function(arg){
var callback = config.callback;
callback(arg);
script.loaded = true;
} head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null
script.src = url; supportLoad = "onload" in script;
onEvent = supportLoad ? "onload" : "onreadystatechange"; script[onEvent] = function(){ if(script.readyState && script.readyState !="loaded"){
return;
}
if(script.readyState == 'loaded' && script.loaded == false){
script.onerror();
return;
}
//删除节点。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null; } script.onerror = function(){
if(window[callbackName] == null){
console.log("请求超时,请重试!");
}
config.error && config.error();//如果有专门的error方法的话,就调用。
(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));
script = script[onEvent] = script.onerror = window[callbackName] = null;
} if(timeout!= 0){
setTimeout(function() {
if(script && script.loaded == false){
window[callbackName] = null;//超时,且未加载结束,注销函数
script.onerror();
}
}, timeout);
} }
<!-- jsonp.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp测试</title>
<script src="jsonp.js"></script>
</head>
<body>
<script>
function myerror(){
alert('there must be something wrong!');
}
function getData (data){
alert("服务器过来的数据是"+data);
}
var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';
//调用函数。
JSONP(url,{
data:{
id:1
},
callback:getData,
error:myerror,
timeout:10000
});
</script>
</body>
<?php $callback = $_GET['callback'];
$id = $_GET['id']; if($id == 1){
$res = 'this is 1';
} if($id == 2){
$res = 'this is 2';
} $res = $callback."('$res')"; echo $res; ?>
2.hash方法
//利用hash,场景是当前页面A 通过iframe 和frame嵌入跨域的页面B
//在A中伪代码如下:
var B = document。个体ElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
//在B 中的伪代码如下
window.onhashchange = function(){
var data = window.location.hash;
}
3.postMessage
//窗口A(http:A.com)向跨域的窗口B(http://B.com)发送信息
window.postMessage('data','http://B.com');//B窗口
//在窗口B中监听;
window.addEventListener('message',function(event){
console.log(event.origin); //http://A.com
console.log(event.source);//Bwindow
console.log(event.data); //data
},false);
4.webSocket方法
//websocket 【 参考质料】(http://www.ruanyifeng.com/blog/2017/05/websocket.html)
var ws = new WebSocket('wss://echo.websocket.org');
ws.onpen = function(evt){
console.log.('Connection open ...');
ws.send('hello websockets')
}
ws.onmessage = function(evt){
console.log('Received message:'+evt.data)
ws.close()
}
ws.onclose = function (evt){
console.log('connection closed.')
}
5.CORS方法
//CORS【 参考质料】(http://www.ruanyifeng.com/blog/2016/04/cors.html)
//url (必须),options(可选)
fetch('/some/url',{
//配置属性才能跨域
method:'get
}).then(function(response){ }).catch(function(err){
//出错了,等价于 then 的第二个参数
});
javascript 跨域 的几种方法的更多相关文章
- javascript跨域的几种方法
以下的例子包含的文件均为为 http://www.a.com/a.html .http://www.a.com/c.html 与 http://www.b.com/b.html,要做的都是从a.htm ...
- 实现跨域的N种方法
从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即 ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
- AJAX实现跨域的三种方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问. 比如说你的网站域名是aaa.com,想要通过AJAX请 ...
- Ajax跨域的几种方法以及每种方法的原理
js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...
- js常用代码示例及解决跨域的几种方法
1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...
- 后端跨域的N种方法
简单来说,CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Co ...
- spring boot 解决 跨域 的两种方法 -- 前后端分离
1.前言 以前做项目 ,基本上是使用 MVC 模式 ,使得视图与模型绑定 ,前后端地址与端口都一样 , 但是现在有些需求 ,需要暴露给外网访问 ,那么这就出现了个跨域问题 ,与同源原则冲突, 造成访问 ...
- .net设置浏览器缓存和跨域的几种方法
.自定义过滤器属性 public class NoCacheAttribute : FilterAttribute, IActionFilter { public void OnActionExecu ...
随机推荐
- 关于想通过ros的dstnat实现公网IP nat 公网IP的情况
转发群里大神的“苏州-海豚在跳舞”的图 理论上客户机收到2.2.2.2过来的包应该直接丢弃.因为它并没有给2.2.2.2发过包.这里不知道如果在2.2.2.2上做 src-nat伪装成1.1.1.1回 ...
- Pascal语言(存档)
数据类型 标准函数 运算符和表达式 输入语句 输出语句 if语句 case语句 for语句 while语句 repeat语句 函数与过程 形参与实参 全局变量与局部变量 数组 字符串 枚举 子界 集合 ...
- Python 爬58同城 城市租房信息
爬取完会自动生成csv电子表格文件,含有房价.押付.链接等信息 环境 py2.7 pip install lxml pip install cssselect #coding:utf-8 impo ...
- jdbc与TiDB数据库交互的过程
以下是使用jdbc操作TiDB数据库,得到的交互过程和指令的说明 ==>代表发送给数据库的指令 // 加载驱动程序Class.forName(driver); // 连接数据库 Connecti ...
- C#中EXCEL表格的内容进度条实现
public void ExportToExcel() { DataTable dt = getDataTable(); if (dt == null) { MessageBox.Show(" ...
- leetcode226
/** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...
- Selenium + Chrome headless 报ERROR:gpu_process_transport_factory.cc(1007)] Lost UI shared context 可忽略并配置不输出日志
Selenium不再推荐使用PhantomJS,会报如下警告 UserWarning: Selenium support for PhantomJS has been deprecated, plea ...
- Spring Boot文档维护:集成Swagger2
一.Swagger简介 在日常的工作中,我们往往需要给前端(WEB端.IOS.Android)或者第三方提供接口,这个时我们就需要提供一份详细的API说明文档.但维护一份详细的文档可不是一件简单的事情 ...
- MySql:SELECT 语句(二)排序 ORDER BY 的使用
1.按单列排序 语句: SELECT col FROM tablename ORDER BY col; ( 一般情况下, ORDER BY 子句中使用的列为选择的列,但也可以使用其他列) 2.按 ...
- jQuery获取URL中的参数
//获取URL地址栏中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + &quo ...