澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:之间相互传值程序代码,

2019-07-15 作者:澳门新萄京赌场网址   |   浏览(77)

数据交互与地方存款和储蓄

2016/01/17 · HTML5, JavaScript · 1 评论 · 存储

原来的文章出处: 涂根华   

一:Iframe父页面与子页面之间的调用

正式词语解释如下:

    Iframe:iframe成分是文书档案中的文书档案。

    window对象: 浏览器会在其开垦贰个HTML文书档案时制造叁个对应的window对象。可是,假设贰个文书档案定义了三个大概多少个框架

(即:包罗贰个要么三个frame可能iframe标签),浏览器就可以为本来文书档案创设二个window对象,再为每一个iframe创制额外的window对象,那个额外的window对象是根生土长窗口的子窗口。

contentWindow: 是指内定的iframe或许iframe所在的window对象。

   1. 父页面与子页面之间的调用。

今昔我们能够慢慢做demo来分别授课下,借使有iframe父页面为 iframe1.html, 父页面上有2个子页面 分别为iframe2.html 和 iframe3.html。

父页面iframe1.html代码如下:

XHTML

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery1.7.js"></script> </head> <body> <iframe src="" id = "iframe3"></iframe> <iframe src="" id = "iframe2"></iframe> <div class="iframe1">父页面</div> <script> function test2() { console.log(1); } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery1.7.js"></script>
</head>
<body>
    <iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe>
    <iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe>
    <div class="iframe1">父页面</div>
   <script>
    function test2() {
        console.log(1);
    }
   </script>
</body>
</html>

子页面iframe2.html代码如下:

XHTML

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery1.7.js"></script> </head> <body> <div id="test">aaa</div> <div class="iframe2">子页面</div> <script> function b() { console.log("作者是子页面"); } function iframe3Page() { console.log("iframe3页面调用iframe2页面"); } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery1.7.js"></script>
</head>
<body>
    <div id="test">aaa</div>
    <div class="iframe2">子页面</div>
       <script>
           function b() {
           console.log("我是子页面");
       }
       function iframe3Page() {
           console.log("iframe3页面调用iframe2页面");
       }
      </script>
</body>
</html>

1.  子页面iframe2.html调用父页面 iframe1.html的因素如下代码:

    console.log($(‘.iframe1’,parent.document));

2.  子页面iframe2.html调用父页面iframe1.html的函数如下代码:

    parent.test2();

只顾:父页面iframe1.html页面 中test2方法不能够放在$(function(){}), 放在里面就调用不到。

3. 子页面iframe2.html调用本身的iframe(如若父页面有大多iframe,获取自己iframe不经过id大概name属性).

    1.率先大家得以在父页面上写贰个函数 用来得到页面全部的iframe,之后进行遍历,进行推断当前的window对象是或不是同样。如下代码:

JavaScript

function getFrame(f){ var frames = document.getElementsByTagName("iframe"); for(i=0;i){ if(frames[i].contentWindow == f){ return(frames[i]) } } }

1
2
3
4
5
6
7
8
function getFrame(f){
    var frames = document.getElementsByTagName("iframe");
    for(i=0;i){
         if(frames[i].contentWindow == f){
              return(frames[i])
          }
      }
  }

    2. 在子页面iframe2.html中如下调用父页面的办法 getFrame.

JavaScript

/* 获取自己的iframe */ var aa = parent.getFrame(this); console.log(aa); $(aa).attr("flag",true);

1
2
3
4
/* 获取自身的iframe */
var aa = parent.getFrame(this);
console.log(aa);
$(aa).attr("flag",true);

给iframe2设置属性 flag: true, 如下截图:

澳门新萄京官方网站 1

4. 父页面iframe1.html调用子页面 iframe2.html的成分及函数.

一般来讲调用有误的:

console.log(document.getElementById(“iframe2”).contentWindow.b());

因为iframe2.html 有望未加载成功,所以要等iframe2加载成功后再进行调用,

据此我们需求 iframe2.onload = function(){}; 那样再举行调用。为了包容IE,大家得以如下封装三个办法:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attach伊芙nt) { iframe.attach伊芙nt('onload',function(){ callback & callback(); }); }else { iframe.onload = function(){ callback & callback(); } } } // 调用方式如下: // 父页面调用子页面iframe2的措施 var iframe2 = document.getElementById("iframe2"); iframeIsLoad(iframe2,function(){ iframe2.contentWindow.b(); // 打字与印刷出 笔者是子页面 // 父页面获取子页面iframe2的成分 var iframeDom = $(".iframe2",iframe2.contentWindow.document); console.log(iframeDom); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {  
         iframe.attachEvent('onload',function(){
             callback & callback();
         });
 
    }else {
         iframe.onload = function(){
              callback & callback();
         }
    }
}
// 调用方式如下:
// 父页面调用子页面iframe2的方法
var iframe2 = document.getElementById("iframe2");
iframeIsLoad(iframe2,function(){
    iframe2.contentWindow.b(); // 打印出 我是子页面  
    // 父页面获取子页面iframe2的元素
    var iframeDom = $(".iframe2",iframe2.contentWindow.document);
    console.log(iframeDom);
 
});

二:驾驭JSONP跨域技巧的基本原理

Javascript是一种在web开荒中不常应用的前端动态脚本技巧,在javascript中,有三个很要紧的乌海限制,被喻为”same-Origin-Policy”同源计谋,这一安插对于javascript代码可以访谈的页面内容作了很珍视的界定,即javascript只好访问与富含它的文书档案在同协议,同域名,同端口的脚本实行相互;

JSONP的基本原理是:利用在页面中成立节点的不二法门向分化域提交http诉求的格局称为JSONP。

JSONP的切实落到实处格局如下:

率先大家为了演示跨域,大家在host文件夹下绑定如下2个域名如下:

   127.0.0.1  abc.example1.com

   127.0.0.1  def.example2.com

内部在abc.example1.com域名下有二个a.html页面;访谈页面路线如下:

   

1. 我们在域名下abc.example1.com下的a.html页面引进二个域名称叫def.example2.com下的a.js文件;如下:

  然后在a.js代码变为如下:

JavaScript

   function jsonp(){         alert(1)    }   jsonp();

1
2
3
4
   function jsonp(){
        alert(1)
   }
  jsonp();

最后我们在域名下abc.example1.com下的a.html页面运转下能够看到弹出对话框 “1”;大家得以看来引进差别域名下的js文件也能跨域施行;

2. 万一本人在域名称为def.example2.com下的a.js文件是不是调用a.html的点子名吧?我们后续来演示这几个demo;大家在abc.example1.com下的a.html引进文件如下:

JavaScript

function jsonp(){     alert(1) }

1
2
3
4
5
function jsonp(){
 
    alert(1)
 
}

中间域名称为def.example2.com下的a.js内容为:jsonp(); 我们三翻五次来运行下页面,可以看出,仍是能够弹出对话框 1;

3.  假使本身在外面包车型地铁调用方法是不是传递三个参数呢?大家后续和第二点同样,只是格局里面多了三个参数字传送进去就可以:如下代码:

def.example2.com下的a.js内容为:jsonp(“我是来测验的”);abc.example1.com下的a.html文件内容为:

JavaScript

 function jsonp(html){        alert(html)   }

1
2
3
 function jsonp(html){
       alert(html)
  }

我们运转下页面a.html,也足以看看弹出了对话框 “作者是来测验的”文案;所以,大家就足以通过这种艺术来给页面中传来外站的数目;能够兑现JSONP的跨域数据;

知情JSONP奉行进度如下:

    首先在客户端注册二个callback(比方jsonpcallback),然后把callback名字(举个例子叫jsonp123456)传给服务器端,服务器端拿到callback名字后,须求用jsonp123456(),把就要输出的json内容囊括起来,此时,服务器生成的json数据本事被客户端精确接受;然后以javascript语法的方式,生成一个function,function的名字正是传递回来的参数jsonp123456.然后就能够在客户端直接运维调用jsonp123456以此函数了;

示范代码如下:

在域名下abc.example1.com下的a.html页面代码如下:

动态成立script标签,给script动态设置src值为域名def.example2.com,那样就贯彻在分化的域名下了;

如下代码:

JavaScript

<script> function jsonp123456(data){ alert(data.name); // tugenhua alert(data.age); // 28 alert(data.single); // yes } var eleScript= document.createElement("script"); eleScript.type = "text/javascript"; eleScript.src = ""; document.getElementsByTagName("HEAD")[0].appendChild(eleScript); </script> //在def.example2.com域名下的a.js代码如下: jsonp123456({"name":'tugenhua','age':'28','single':'yes'});

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function jsonp123456(data){
        alert(data.name); // tugenhua
        alert(data.age);  // 28
        alert(data.single); // yes
    }
    var eleScript= document.createElement("script");
    eleScript.type = "text/javascript";
    eleScript.src = "http://def.example2.com/iframe/a.js?jsonpcallback=jsonp123456";
    document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
</script>
//在def.example2.com域名下的a.js代码如下:
jsonp123456({"name":'tugenhua','age':'28','single':'yes'});

分析: 在a.html下给服务器端发送乞求,何况给服务器端传递参数 jsonpcallback=jsonp123456;服务器端获得jsonpcallback这一个参数后;供给用jsonp123456(),把将在输出的json内容囊括起来,此时,服务器生成的json数据本事被客户摆正确接受;然后以javascript语法的措施,生成四个function,function的名字便是传递回来的参数jsonp123456.然后就能够在客户端直接运行调用jsonp123456以此函数了;

如上演示的代码; 之后分别弹出data.name;data.age;及data.single;

JSONP的优点:

它不像XMLHttpRequest对象实现ajax诉求受到同源计谋的界定,它在拥有的浏览器都接济,

诸如古老的IE6也支撑,而且在呼吁完结后得以通过callback的办法传回结果;

JSONP的缺点:

1. 只援救get须要,不支持post必要,它只帮助http跨域的呼吁意况,

无法减轻分歧域的四个页面之间怎么实行javascript调用的主题材料; 

  1. 是因为它是get伏乞,传递的参数都拼在url前边,因而数据安全性不高;

三:iframe之间通讯难点

1. iframe通信 分为:同域通讯 和 跨域通讯。所谓同域通讯是指   下的a.html页面嵌套 iframe 举个例子: 的B.html页面,那三个页面数据举办通讯,比方自身想在父页面A.html 调用子页面当中的函数 我们很轻便想到照旧google下 ;document.getElementById(‘iframeA’).contentWindow.b(); 这种方法,个中b 是子页面B.html中的八个函数。不过如此调用下有个难题本人纠结了比较久,正是既然在火狐下报那样的一无所长, 如下图所示:

澳门新萄京官方网站 2

b不是个函数 然则本人在子页面明明定义了这般二个函数,那么为何会报这样的失实吗?经过缜密深入分析及google,开采有那般叁个题材须求知道,当iframe未有加载成功后 笔者就去试行那几个js会报那样的荒谬,所以就试着在火狐下 用iframe.onload 那些函数 进行测量检验,果然没有报错,是不利的 所以就鲜明是其一题目。所以就想写个包容IE和火狐 google写个函数 来规定iframe已经加载成功!,其实给个回调函数来调用我们地点的诀窍。

汇总上面的笔触 A.html 就可以写个那样的代码:

JavaScript

<iframe src="" id="iframeA" name="iframeA"></iframe> <div id="topName">topNddddddddddddddddame</div> <script> function A(){ alert("A"); } var iframe = document.getElementById('iframeA'); iframeIsLoad(iframe,function(){ var obj = document.getElementById('iframeA').contentWindow; obj.b(); }); function iframeIsLoad(iframe,callback){ if(iframe.attach伊芙nt) { iframe.attachEvent('onload',function(){ callback && callback(); }); }else { iframe.onload = function(){ callback && callback(); } } } </script> B.html 代码如下: var b = function(){ alert("B"); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA"></iframe>
<div id="topName">topNddddddddddddddddame</div>
<script>
    function A(){
        alert("A");
    }
    var iframe = document.getElementById('iframeA');
    iframeIsLoad(iframe,function(){
        var obj = document.getElementById('iframeA').contentWindow;
        obj.b();
    });
     function iframeIsLoad(iframe,callback){
        if(iframe.attachEvent) {
            iframe.attachEvent('onload',function(){
                callback && callback();
            });
        }else {
            iframe.onload = function(){
                callback && callback();
            }
        }
     }
</script>
B.html 代码如下:
var b = function(){
    alert("B");
};

2.子页面调用父页面包车型地铁函数很轻巧,只要这么搞下就ok了,window.parent.A();

3. 子页面取父页面成分的值: window.parent.document.getElementById(“topName”).innerHTML等办法。

二: iframe跨域通讯。

iframe跨域访谈一般分为2种意况,第一种是同主域,差别子域的跨域。 第三种是:不一致主域跨域。

一、 是同主域上边,差别子域之间的跨域;能够透过document.domain 来安装一样的主域来缓和。

假如今后自家有个域 abc.example.com 下有个页面叫abc.html, 页面上嵌套了三个iframe 如下:

XHTML

<iframe src="" id="iframe2" style="display:none;"></iframe>,

1
<iframe src="http://def.example.com/demo/def.html"  id="iframe2" style="display:none;"></iframe>,

本身想在abc域下的页面abc.html 访谈 def域下的def.html  大家都精通是因为安全性 游历器的同源战术的界定,js无法操作页面不一致域下 不相同协商下 差别端口的页面,所以就要化解跨域访谈了,倘诺父页面abc.html 页面有个js函数:

 function test(){console.log(1);};

 作者想在子页面调用这些函数 依然依据上面包车型地铁同域方式调用 parent.test();那样,通过在火狐下看 已经跨域了 化解的法子是 在逐条js函数最上部 加一句 document.domain = ‘example.com’,就足以减轻了。

 abc.html代码如下:

XHTML

<iframe src="" id="iframe2" style="display:none;"></iframe> // 跨域 子页调用父页的 函数 (假如是上面test函数) document.domain = 'example.com'; function test(){console.log(1);};

1
2
3
4
<iframe src="http://def.example.com/demo/def.html"  id="iframe2" style="display:none;"></iframe>
  // 跨域 子页调用父页的 函数 (假设是下面test函数)
  document.domain = 'example.com';
  function test(){console.log(1);};

def.html代码如下:

JavaScript

/* * 子页调用父页的主意 */ document.domain = 'example.com'; //window.top.test(); window.parent.test();

1
2
3
4
5
6
/*
* 子页调用父页的方法
*/
document.domain = 'example.com';
//window.top.test();
window.parent.test();

抑或那四个页面 笔者想父页调用子页 如下方法:

a.html代码如下:

JavaScript

/* * 跨域 父页想调用子页的的函数 */ document.domain = 'example.com'; var iframe = document.getElementById('iframe2'); iframeIsLoad(iframe,function(){ var obj = iframe.contentWindow; obj.child(); }); function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) { iframe.attachEvent('onload',function(){ callback & callback(); }); }else { iframe.onload = function(){ callback & callback(); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
* 跨域 父页想调用子页的的函数
*/
document.domain = 'example.com';
var iframe = document.getElementById('iframe2');
iframeIsLoad(iframe,function(){
    var obj = iframe.contentWindow;
         obj.child();
});
function iframeIsLoad(iframe,callback){
        if(iframe.attachEvent) {
            iframe.attachEvent('onload',function(){
                callback & callback();
            });
        }else {
            iframe.onload = function(){
                callback & callback();
            }
        }
}

一经今后def.html页面有个child函数 代码如下:

JavaScript

document.domain = 'example.com'; function child(){console.log('作者是子页');}

1
2
document.domain = 'example.com';
function child(){console.log('我是子页');}

就能够跨域调用了 不管是子页面调用父页面 仍然父页面调用子页面。一切ok!

三:是见仁见智主域跨域;

纵然google有二种方法有关区别主域上的跨域难点 有通过location.hash方法仍然window.name方法只怕html5及flash等等,

唯独本人认为上边iframe这种措施值得学习下,如下图所示:

澳门新萄京官方网站 3

域a.com的页面request.html(即

思路:要落到实处a.com域下的request.html页面央浼域b.com下的process.php,能够将必要参数通过url传给response.html,由response.html向process.php发起真正的ajax要求(response.html与process.php都属于域b.com),然后将赶回的结果通过url传给proxy.html,最终由于proxy.html和request.html是在同个域下,所以能够在proxy.html利用window.top 将结果回到在request.html达成真正的跨域。

ok, 先看看页面结构

a.com域下有:

 request.html  proxy.html

1
2
 request.html
 proxy.html

b.com域下有:

response.html Process.php

1
2
3
response.html
 
Process.php

先来探视request.html页面如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <p id="result">这里将会填上响应的结果</p> <a id="sendBtn" href="javascript:void(0)">点击,发送跨域须求</a> <iframe id="serverIf" style="display:none"></iframe> <script> document.getElementById('sendBtn').onclick = function() { var url = '', fn = 'GetPerson', //那是概念在response.html的点子 reqdata = '{"id" : 24}', //那是伸手的参数 callback = "CallBack"; //那是乞求全经过一鼓作气后实施的回调函数,施行最终的动作 CrossRequest(url, fn, reqdata, callback); //发送乞请 } function CrossRequest(url,fn,reqdata,callback) { var server = document.getElementById('serverIf'); server.src = url '?fn=' encodeU君越IComponent(fn) "&data=" encodeUHavalIComponent(reqdata) "&callback=" encodeU普拉多IComponent(callback); } //回调函数 function CallBack(data) { var str = "My name is " data.name ". I am a " data.sex ". I am " data.age " years old."; document.getElementById("result").innerHTML = str; } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
    <p id="result">这里将会填上响应的结果</p>
    <a id="sendBtn" href="javascript:void(0)">点击,发送跨域请求</a>
    <iframe id="serverIf" style="display:none"></iframe>
 
    <script>
        document.getElementById('sendBtn').onclick = function() {
            var url = 'http://b.com/demo/ajax/ajaxproxy/reponse.html',
                fn = 'GetPerson',          //这是定义在response.html的方法
                reqdata = '{"id" : 24}',   //这是请求的参数
                callback = "CallBack";     //这是请求全过程完成后执行的回调函数,执行最后的动作
 
            CrossRequest(url, fn, reqdata, callback);  //发送请求
        }
 
        function CrossRequest(url,fn,reqdata,callback) {
            var server = document.getElementById('serverIf');
            server.src = url '?fn=' encodeURIComponent(fn) "&data=" encodeURIComponent(reqdata) "&callback=" encodeURIComponent(callback);
        }
        //回调函数
        function CallBack(data) {
            var str = "My name is " data.name ". I am a " data.sex ". I am " data.age " years old.";
             document.getElementById("result").innerHTML = str;
        }
    </script>
</body>
</html>

以此页面其实正是要告诉response.html:笔者要让您实践你定义好的格局GetPerson,並且要用笔者给你的参数'{“id” : 24}’。

response.html纯粹是承担将CallBack这么些法子名传递给下一个人兄长proxy.html,而proxy.html得到了CallBack那一个办法名就能够实践了,

因为proxy.html和request.html是同域的。

response.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <iframe id="proxy"></iframe> <script> // 通用方法 ajax央浼function _request (reqdata,url,callback) { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data = xmlhttp.responseText; callback(data); } } xmlhttp.open('POST',url); xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8"); xmlhttp.send(reqdata); } // 通用方法 获取url参数 function _getQuery(key) { var query = location.href.split('?')[1], value = decodeURIComponent(query.split(key "=")[1].split("&")[0]); return value; } //向process.php发送ajax请求 function GetPerson(reqdata,callback) { var url = ''; var fn = function(data) { var proxy = document.getElementById('proxy'); proxy.src = "" encodeURIComponent(data) "&callback=" encodeURIComponent(callback); }; _request(reqdata, url, fn); } (function(){ var fn = _getQuery('fn'), reqdata = _getQuery("data"), callback = _getQuery("callback"); eval(fn "('" reqdata "', '" callback "')"); })(); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
     <iframe id="proxy"></iframe>
    <script>
        // 通用方法 ajax请求
        function _request (reqdata,url,callback) {
            var xmlhttp;
            if(window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
 
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    callback(data);
                }
            }
            xmlhttp.open('POST',url);
            xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            xmlhttp.send(reqdata);
        }
 
        // 通用方法 获取url参数
        function _getQuery(key) {
            var query = location.href.split('?')[1],
                value = decodeURIComponent(query.split(key "=")[1].split("&")[0]);
            return value;
        }
 
        //向process.php发送ajax请求
        function GetPerson(reqdata,callback) {
            var url = 'http://b.com/demo/ajax/ajaxproxy/process.php';
            var fn = function(data) {
                var proxy = document.getElementById('proxy');
                proxy.src = "http://a.com/demo/ajax/ajaxproxy/Proxy.html?data=" encodeURIComponent(data) "&callback=" encodeURIComponent(callback);
            };
            _request(reqdata, url, fn);
        }
 
        (function(){
            var fn = _getQuery('fn'),
                reqdata = _getQuery("data"),
                callback = _getQuery("callback");
           eval(fn "('" reqdata "', '" callback "')");
        })();
    </script>
</body>
</html>

这边实在即是接受来自request.html的央浼获得央求参数和章程后向服务器process.php发出真正的ajax央浼,然后将从服务器再次回到的多少以及从request.html传过来的回调函数名传递给proxy.html。 

接下去看看php代码如下,其实正是想回去二个json数据:

PHP

<?php $data = json_decode(file_get_contents("php://input")); header("Content-Type: application/json; charset=utf-8"); echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}'); ?>

1
2
3
4
5
<?php
    $data = json_decode(file_get_contents("php://input"));
    header("Content-Type: application/json; charset=utf-8");
    echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
?>

终极就是proxy.html代码:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New Document </title> </head> <body> <script> function _getUrl(key) {//通用方法,获取UEscortL参数 var query = location.href.split("?")[1], value = decodeURIComponent(query.split(key "=")[1].split("&")[0]); return value; } (function() { var callback = _getUrl("callback"), data = _getUrl("data"); eval("window.top." decodeURIComponent(callback) "(" decodeURIComponent(data) ")"); })(); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
    <script>
         function _getUrl(key) {//通用方法,获取URL参数
                       var query = location.href.split("?")[1],
                value = decodeURIComponent(query.split(key "=")[1].split("&")[0]);
                    return value;
               }
         (function() {
             var callback = _getUrl("callback"),
                 data = _getUrl("data");
             eval("window.top." decodeURIComponent(callback) "(" decodeURIComponent(data) ")");
         })();
    </script>
</body>
</html>

那边也是最后一步了,proxy终于获得了request.html透过response.html传过来的回调函数名以及从response.html间接传过来的响应数据,

利用window.top推行request.html里定义的回调函数。

四:iframe中度自适应的难点。

  iframe高度自适应分为2种,一种是同域下自适应  别的一种是跨域下自适应,上边大家来探视同域下iframe中度自适应的难点。

   1. 同域下iframe中度自适应的难题:

     思路:获取被嵌套iframe成分,通过JavaScript取得被嵌套页面最终中度,然后在主页面实行安装来兑现。

     即使大家demo有iframe1.html和iframe2.html 上面贴上iframe1.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <iframe src="" style="width:100%;border:1px solid #333;" frameborder="0" id="iframe"></iframe> <script> window.onload = function() { var iframeid = document.getElementById('iframe'); if(iframeid && !window.opera) { if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { iframeid.height = iframeid.contentDocument.body.offsetHeight; }else if(iframeid.Document && iframeid.Document.body.scrollHeight){ iframeid.height = iframeid.Document.body.scrollHeight; } } } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
 
<body>
    <iframe src="http://a.com/demo/ajax/iframeheight/iframe2.html" style="width:100%;border:1px solid #333;" frameborder="0" id="iframe"></iframe>
 
    <script>
        window.onload = function() {
            var iframeid = document.getElementById('iframe');
            if(iframeid && !window.opera) {
                if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                    iframeid.height = iframeid.contentDocument.body.offsetHeight;
                }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
                    iframeid.height = iframeid.Document.body.scrollHeight;
                }
            }
        }
    </script>
</body>
</html>

iframe2.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <div style="height:500px;"></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
 
<body>
    <div style="height:500px;"></div>
</body>
</html>

就能够动态设置iframe1页面包车型客车可观为iframe2的可观了。

2. 跨域下iframe中度自适应的难点。

第一大家精晓iframe跨域大家是无法用上边js格局来支配了,所以大家只能用当中间键,大家得以在a.com域下iframe1.html页面嵌套三个b.com域下的iframe2.html页面,然后自身在iframe2.html页面嵌套个和iframe1.html一样域的iframe3.html页面了,那样的话 iframe1.html和iframe3.html就可以无障碍的展开通讯了,因为页面iframe2.html嵌套iframe3.html,所以iframe2.html得以改写iframe3.html的href值。

 iframe第11中学的内容:

 iframe1.html剧情首要接受iframe3.html页面传过来的内容还要去做到相应的操作。iframe1.html代码如下:

XHTML

<iframe src="" style="width:400px;height:200px;" id="iframe"></iframe> <script> var ifr_el = document.getElementById("iframe"); function getIfrData(data){ ifr_el.style.height = data "px"; } </script>

1
2
3
4
5
6
7
<iframe src="http://b.com/demo/ajax/iframeheight/iframe2.html" style="width:400px;height:200px;" id="iframe"></iframe>
<script>
   var ifr_el = document.getElementById("iframe");
   function getIfrData(data){
    ifr_el.style.height = data "px";
   }
</script>

iframe2.html中的内容:

iframe2.html剧情是怎么把值传给iframe3.html页面,刚才说了是将值传递到iframe3.html页面的href中,所以假诺修改iframe的src就可以,因为不用刷新C页面,所以能够用过hash的法子传送给iframe3.html页面.iframe2.html代码如下:

JavaScript

<!DOCTYPE HTML> <html> <head> <title> New Document </title> <style> *{margin:0;padding:0;} </style> </head> <body> <iframe id="iframe" src="" width="0" height="230px"></iframe> <script> var oldHeight = 0, ifr_el = document.getElementById("iframe"); t && clearInterval(t); var t = setInterval(function(){ var height = document.body.scrollHeight; if(oldHeight != height) { oldHeight = height; ifr_el.src = '#' oldHeight; } },200); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
<body>
    <iframe id="iframe" src="http://a.com/demo/ajax/iframeheight/iframe3.html" width="0" height="230px"></iframe>
    <script>
        var oldHeight = 0,
              ifr_el = document.getElementById("iframe");
 
        t && clearInterval(t);
        var t = setInterval(function(){
            var height = document.body.scrollHeight;
            if(oldHeight != height) {
                oldHeight = height;
                ifr_el.src = '#' oldHeight;
            }
        },200);
    </script>
</body>
</html>

能够看看 默许情形下 iframe1.html 页面笔者给iframe2.html的万丈是200像素, 可是在iframe2.html自身给iframe3.html高度是230像素,那么符合规律情况下是有滚动条的,那么今后本身是想在iframe2.html得到滚动条的惊人,把中度传给通过iframe3.html的src里面去,然后在iframe3.html页面里拿走这些中度值 传给iframe1.html(因为iframe1.html和iframe3.html是同域的),所以iframe1.html能取到这些惊人值,再安装下本人的高度就是其一值就ok了。iframe3.html页面包车型大巴独步天下效能就是收纳iframe2.html页面通过href传进来的值并且传递给iframe1.html页面,可到iframe2.html页面传来的值能够经过八个机械漏刻不停去查看location.href是 否被改动,可是如此认为功效非常的低,还或许有个章程正是在新的浏览器中通过onhashchange事件 (IE8 ,Chrome5.0 ,Firefox3.6 ,Safari5.0 ,Opera10.6 )来监听href的改观。

iframe3.html代码如下:

JavaScript

<script> var oldHeight = 0; t && clearInterval(t); var t = setInterval(function(){ var height = location.href.split('#')[1]; if(height && height != oldHeight) { oldHeight = height; if(window.parent.parent.getIfrData) { window.parent.parent.getIfrData(oldHeight); } } },200); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var oldHeight = 0;
    t && clearInterval(t);
    var t = setInterval(function(){
        var height = location.href.split('#')[1];
        if(height && height != oldHeight) {
            oldHeight = height;
            if(window.parent.parent.getIfrData) {
                window.parent.parent.getIfrData(oldHeight);
            }
        }
    },200);
</script>

如此那般就足以解决由此跨域完结iframe自适应中度的标题了。

五:本地存款和储蓄cookie,sessionStorage, localStorage比较及使用

一:Cookie

1. 什么是cookie?

     Cookie是在客户端用于存款和储蓄会话新闻的,用户伏乞页面在web服务器与浏览器之间传递。每当同一台Computer通过浏览器诉求某些页面时,就能够发送这几个 cookie。

 2. cookie的限制?

     1. Cookie的数目大小限制只好为4kb数据,假诺数额长度当先4kb数据,超过后的数额将赶回空字符串。

     2. Cookie是以文件情势积累在客户端Computer中,查看和更动cookie很有益,但是安全性方面不佳,因而根本的数码毫无使用cookie来储存。

     3. Cookie是有 保藏期概念的,如果想要cookie存储多久,能够安装cookie的岁月,一般的场所下,cookie的生命周期是在游历器关闭的时候失效。

     4. Cookie是有域的定义的,在分裂的域下,cookie不能够互相采纳,cookie对于那一个域是便宜的,全体向该域发送的呼吁中都会含有那一个cookie 的音讯的,

    那些值能够涵盖子域(subdomain 如www.zuixiandao.cn) ,也能够不分包它(如.zuixiandao.cn, 对于有所的zuixiandao.cn的享有子域都灵验). 

    如果未有生硬的钦赐,那么这几个域会被认作来自设置cookie的那些域。

     5. Cookie路线的定义:对于钦命域中的这几个路径,应该向服务器发送cookie,譬如大家得以钦点cookie唯有从

     6. Cookie失效时间的定义:表示cookie何时应该被去除,暗中同意情形下,浏览器会话停止时将在删除全数的cookie,可是也足以协调安装

 删除时间的。这么些值是个红霉素T格式的日期(Wdy DD-Mon-YYYY HH:MM:SS 奇霉素T),用于钦赐相应删除cookie的可信赖时间,由此,

 cookie可在浏览器关闭后依旧保存在用户的机器上(同二个浏览器,区别的浏览器无法保留),假如设置的日期是晚点的日期,那么cookie登时删掉。

      7. Cookie安全标识 钦命后,cookie独有在应用SSL连接的时候才发送到服务器。譬喻:cookie消息只可以发送给, 

  而

二: javascript中的cookie

 1. Javascript中的cookie是 一雨后苦笋由支行隔离的名-值对,如下边包车型大巴天猫商城的cookie,如下:

document.cookie = “isg=E5AA5F2CEE8AA93BB351D1601F7B218E; thw=cn; _med=dw:1920&dh:1080&pw:1920&ph:1080&ist:0; v=0; t=1292efa78d867ff6275e6c5cb971bed7”;

     2. 设置cookie的超时。

         expires;   // 设置cookie的逾期的岁月

         以下设置 cookie 在 365天后超时;

         var date = new Date();

         date.setTime(date.getTime() 365*24*3600*1000);

         document.cookie = ‘key:value;expires =’   date.toGMTString();

上面是安装cookie, 删除cookie,及 获取cookie的包裹代码如下:

JavaScript

// 获取具备的cookies function getCookies() { var all库克ies = document.cookie; return decodeU卡宴IComponent(allCookies); } // 获取钦赐的cookie function getOneCookie(name) { var allCookies = document.cookie.split(";"); for(var i = 0, ilen = allCookies.length; i < ilen; i ) { var temp = allCookies[i].split("="); if($.trim(decodeURIComponent(temp[0])) == name) { return decodeURIComponent(temp[1]); } } return -1; } // 增加cookie 保质期是一年 function addCookie(name,value,expires,path,domain,secure) { var curCookie = encodeUMuranoIComponent(name) '=' encodeU中华VIComponent(value); if(expires instanceof Date) { curCookie = ';expires =' expires.to博来霉素TString(); }else { var date = new Date(); date.setTime(date.getTime() 365*24*3600*1000); curCookie = ';expires =' date.toGMTString(); } if(path) { curCookie = "; path=" path; } if(domain) { curCookie = "; domain=" domain; } if(secure) { curCookie = "; secure"; } document.cookie = curCookie; } // 删除cookie function removeCookie(name,path,domain,secure) { addCookie(name,"",new Date(0),path,domain,secure); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 获取所有的cookies
function getCookies() {
    var allCookies = document.cookie;
    return decodeURIComponent(allCookies);
}
// 获取指定的cookie
function getOneCookie(name) {
    var allCookies = document.cookie.split(";");
    for(var i = 0, ilen = allCookies.length; i < ilen; i ) {
        var temp = allCookies[i].split("=");
        if($.trim(decodeURIComponent(temp[0])) == name) {
            return decodeURIComponent(temp[1]);
         }
    }
    return -1;
}
// 添加cookie 有效期是一年
function addCookie(name,value,expires,path,domain,secure) {
    var curCookie = encodeURIComponent(name) '=' encodeURIComponent(value);
    if(expires instanceof Date) {
        curCookie = ';expires =' expires.toGMTString();
    }else {
        var date = new Date();                
        date.setTime(date.getTime() 365*24*3600*1000);
        curCookie = ';expires =' date.toGMTString();
    }
    if(path) {
        curCookie = "; path=" path;
    }
    if(domain) {
        curCookie = "; domain=" domain;
    }
    if(secure) {
        curCookie = "; secure";
    }
    document.cookie = curCookie;
}
// 删除cookie
function removeCookie(name,path,domain,secure) {
     addCookie(name,"",new Date(0),path,domain,secure);
}

下边大家来做贰个小须要,比方三个登录页面,有 有户名,密码,记住密码,及呈现cookie和删除cookie按键。当本身点击记住密码的时候,那么当自家第重启开页面时候,只要输入用户名,密码会自动填充,当然大家也得以点击删除cookie按键进行删减,如下代码:

HTML代码:

XHTML

<h2>cookie介绍</h2> <p> <label>用户名:</label> <input type="text" class="userName" id="userName"/> </p> <p> <label>密码:</label> <input type="password" id="password"> </p> <p> <label>记住密码:</label> <input type="checkbox" id="remember"/> </p> <input value="删除" type="button" id="delCookie"> <input type="button" value="展现cookie" id="showpassword">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h2>cookie介绍</h2>
<p>
     <label>用户名:</label>
     <input type="text" class="userName" id="userName"/>
</p>
<p>
     <label>密码:</label>
     <input type="password" id="password">
</p>
<p>
     <label>记住密码:</label>
     <input type="checkbox" id="remember"/>
</p>
<input value="删除" type="button" id="delCookie">  
<input type="button" value="显示cookie" id="showpassword">

JS代码如下:

JavaScript

<script> // 获取具备的cookies function getCookies() { var allCookies = document.cookie; return allCookies; } // 获取钦命的cookie function getOneCookie(name) { var allCookies = document.cookie.split(";"); for(var i = 0, ilen = allCookies.length; i < ilen; i ) { var temp = allCookies[i].split("="); if(temp[0] == decodeURIComponent(name)) { return decodeURIComponent(temp[1]); } } return -1; } // 增添cookie 有效期是一年 function addCookie(name,value,expires,path,domain,secure) { var curCookie = encodeU卡宴IComponent(name) '=' encodeUCRUISERIComponent(value); if(expires instanceof Date) { curCookie = ';expires =' expires.to金霉素TString(); }else { var date = new Date(); date.setTime(date.getTime() 365*24*3600*1000); curCookie = ';expires =' date.toGMTString(); } if(path) { curCookie = "; path=" path; } if(domain) { curCookie = "; domain=" domain; } if(secure) { curCookie = "; secure"; } document.cookie = curCookie; } // 删除cookie function removeCookie(name,path,domain,secure) { addCookie(name,"",new Date(0),path,domain,secure); } $("#澳门新萄京官方网站,userName").unbind('blur').bind('blur',function(){ var val = $(this).val(); if(val) { var curCookie = getOneCookie(val); if(curCookie != -1) { $("#password").val(curCookie); } } }); // 记住密码 $("#remember").unbind('click').bind('click',function(){ if(document.getElementById("remember").checked) { if($("#userName").val() && $("#password").val()) { addCookie($("#userName").val(),$("#password").val()); alert("Saved!"); } } }); // 删除cookie $("#delCookie").unbind('click').bind('click',function() { if($("#userName").val()) { removeCookie($("#userName").val()); alert(get库克ies()); }else { alert("用户名称叫空"); } }); // 显示cookie $("#showpassword").unbind('click').bind('click',function(){ if($("#userName").val()) { var curCookie = getOneCookie($("#userName").val()); if(curCookie != -1) { alert(curCookie); }else { alert("没有cookie"); } }else { alert("没有cookie"); } }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script>
        // 获取所有的cookies
        function getCookies() {
            var allCookies = document.cookie;
            return allCookies;
        }
        // 获取指定的cookie
        function getOneCookie(name) {
            var allCookies = document.cookie.split(";");
            for(var i = 0, ilen = allCookies.length; i < ilen; i ) {
                var temp = allCookies[i].split("=");
                if(temp[0] == decodeURIComponent(name)) {
                    return decodeURIComponent(temp[1]);
                }
            }
            return -1;
        }
        // 添加cookie 有效期是一年
        function addCookie(name,value,expires,path,domain,secure) {
            var curCookie = encodeURIComponent(name) '=' encodeURIComponent(value);
            if(expires instanceof Date) {
                curCookie = ';expires =' expires.toGMTString();
            }else {
                var date = new Date();
                date.setTime(date.getTime() 365*24*3600*1000);
                curCookie = ';expires =' date.toGMTString();
            }
            if(path) {
                curCookie = "; path=" path;
            }
            if(domain) {
                curCookie = "; domain=" domain;
            }
            if(secure) {
                curCookie = "; secure";
            }
            document.cookie = curCookie;
        }
        // 删除cookie
        function removeCookie(name,path,domain,secure) {
            addCookie(name,"",new Date(0),path,domain,secure);
        }
 
        $("#userName").unbind('blur').bind('blur',function(){
              var val = $(this).val();
              if(val) {
                 var curCookie = getOneCookie(val);
                 if(curCookie != -1) {
                    $("#password").val(curCookie);
                 }
              }
        });
        // 记住密码
        $("#remember").unbind('click').bind('click',function(){
            if(document.getElementById("remember").checked) {
                if($("#userName").val() && $("#password").val()) {
                    addCookie($("#userName").val(),$("#password").val());  
                    alert("Saved!");
                }
 
            }
        });
        // 删除cookie
        $("#delCookie").unbind('click').bind('click',function() {
            if($("#userName").val()) {
                removeCookie($("#userName").val());
                alert(getCookies());
            }else {
                alert("用户名为空");
            }
        });
 
        // 显示cookie
        $("#showpassword").unbind('click').bind('click',function(){
            if($("#userName").val()) {
                var curCookie = getOneCookie($("#userName").val());
                if(curCookie != -1) {
                    alert(curCookie);
                }else {
                    alert("没有cookie");
                }
 
            }else {
                alert("没有cookie");
            }
        });
</script>

Cookie的实例demo如下:

cookie

三:IE用户数量;

在IE5.0中,微软由此贰个自定义行为引进了长久化用户数量的定义,用户数量允许每一种文书档案最多128kb的多少,每种域名最多1MB的多寡,

要选择长久化数据,首先必须如下所示,使用css在某些成分上钦赐userData行为:

 

IE用户数量

 

针对IE有如下使用办法:

1. getAttribute(“key”) 获取内定的属性值。

2. load(object) 从 userData 存款和储蓄区载入存款和储蓄的目的数据。

3. removeAttribute(“key”) 移除对象的钦点属性。

4. save(object) 将对象数据存款和储蓄到贰个 userData 存款和储蓄区。

5. setAttribute(“key”,”value”) 设置钦定的属性值。

咱俩后续做三个demo来演示下在IE浏览器下的囤积的demo。

HTML代码如下:

XHTML

<div style="behavior:url(#default#userData)" id="dataStore">IE用户数量</div> <input value="IE下保存数据" type="button" id="IESave"> <input type="button" value="IE下获取数据" id="IEGet"> <input type="button" value="IE下删除数据" id="IERemove">

1
2
3
4
<div style="behavior:url(#default#userData)" id="dataStore">IE用户数据</div>
<input value="IE下保存数据" type="button" id="IESave">
<input type="button" value="IE下获取数据" id="IEGet">
<input type="button" value="IE下删除数据" id="IERemove">

JS代码如下:

JavaScript

var dataStore = document.getElementById("dataStore"); $("#IESave").click(function(e){ dataStore.setAttribute("name","tugenhua"); dataStore.setAttribute("book",'111111'); dataStore.save("bookInfo"); }); // IE下获取数据 $("#IEGet").click(function(){ dataStore.load("bookInfo"); alert(dataStore.getAttribute("name")); alert(dataStore.getAttribute("book")); }); // IE下删除数据 $("#IERemove").click(function(){ dataStore.removeAttribute("name"); dataStore.removeAttribute("book"); dataStore.save("bookInfo"); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var dataStore = document.getElementById("dataStore");
$("#IESave").click(function(e){
    dataStore.setAttribute("name","tugenhua");
    dataStore.setAttribute("book",'111111');
    dataStore.save("bookInfo");
});
// IE下获取数据
$("#IEGet").click(function(){
    dataStore.load("bookInfo");
    alert(dataStore.getAttribute("name"));
    alert(dataStore.getAttribute("book"));
});
 
// IE下删除数据
$("#IERemove").click(function(){
    dataStore.removeAttribute("name");
    dataStore.removeAttribute("book");
    dataStore.save("bookInfo");
});

IE浏览器下的demo如下:

应用IE浏览器下查看效果 请点击自个儿!!

四:sessionStorage 和 localStorage 

Html5骤增了多个地方存款和储蓄数据,分别是sessionStorage 和 localStorage.

浏览器匡助程度如下:

澳门新萄京官方网站 4

注意:IE8 及 以上都扶助 web storage。

   sessionStorage: 将数据保存在session对象中,所谓session,指用户浏览有个别网址时,从踏入网址到浏览器关闭的这两天,也正是用户浏览这么些网址所花费的时日。

       生命周期:指只在脚下的窗口有效,打开贰个新的同源窗口,大概说重启浏览器都失效。

       数据大小:能够保存5MB乃至更多。

   localStorage: 将数据保存在客户端本地的硬件设施(平常是指硬盘,但也得以是别的硬件装置),纵然浏览器被关门了,该数额依然存在,下一次开辟浏览器访谈网址时仍是能够承袭采纳。可是,数据保存是按不一样的浏览器分别张开的,也正是说,假若张开其余浏览器,是读取不到在这么些浏览器中保存的数据的。

     生命周期:数据直接保留在硬盘中。悠久性保存(可是分歧的浏览器保存的数据,是不能够通用的)。

     数据大小:能够保存5MB乃至越来越多的多少。

    1. cookie 与 sessionStorage 及 localStorage的区别;   

        共同点:都以在客户端存款和储蓄数据,且是同源的。

    区别:

存款和储蓄大小不均等;cookie存款和储蓄数据最大不得不为4kb,而sessionStorage与localStorage能够保存5MB以至更非常多据。

  Cookie数据始终在同源的http诉求中带走,即cookie在浏览器与服务器之间来回传递,而sessionStorage与localStorage不会自动发给服务端,仅在地面保存。

数据保藏期分裂;sessionStorage仅在前段时间浏览器窗口未关门以前有效(同源的新窗口不奏效),localStorage仅在当前的浏览器下永远生效(分化的浏览器无法分享数据),不管关闭了 重新展开的 依旧卓有成效的。Cookie只在安装的cookie过期时间在此之前一直有效,即使窗口或然浏览器关闭,也许张开新的同源窗口。

作用域分歧;sessionStorage不在分裂的浏览器窗口中国共产党享,便是同二个页面,localStorage在富有的同源窗口中都以分享的(只在长久以来的浏览器下),cookie在具有的同源窗口都是分享的(仅在同四个浏览器中)。

      SessionStorage与LocalStorage他们都兼备同等的办法;

      1. setItem存储value

         用法:.setItem( key, value),代码如下:

         localStorage.setItem(key,value):将value存储到key字段

      2. getItem获取value

          用法:.getItem(key) 代码如下:

          localStorage.getItem(key):获取钦命key本地存款和储蓄的值

      3. removeItem删除key

          用法:.removeItem(key),代码如下:

          localStorage.removeItem(key):删除钦命key当地存款和储蓄的值

      4. clear清除全部的key/value

          用法:.clear(),代码如下:

          localStorage.clear();  清除全数的多寡(firefox除却)

      它将去除全部同源的地头存储的localStorage数据

      而对此Session Storage,它只清空当前对话存款和储蓄的多少。

      sessionStorage也可能有地点同样的方法;

上边大家来行使sessionStorage及 localStorage 来演练下,来做个demo。如下:

HTML代码如下:

XHTML

<h1>web Storage实列</h1> <p id="msg"></p> <input type="text" id="input" /> <input type="button" value="保存数据" id="saveData"/> <input type="button" value="读取数据" id="readData"/> <input type="button" value="删除数据" id="removeData"/> <input type="button" value="清除全数的数额" id="clearData"/>

1
2
3
4
5
6
7
<h1>web Storage实列</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" id="saveData"/>
<input type="button" value="读取数据" id="readData"/>
<input type="button" value="删除数据" id="removeData"/>
<input type="button" value="清除所有的数据" id="clearData"/>

页面上一个input输入框,当本身点击 保存数据 按键后 分别采纳sessionStorage和localStorage 把值保存起来,当本人点击 读取数据 开关后 读取数据,分别在不一致的浏览器依然新的同源窗口 恐怕关闭浏览器窗口 重新张开新窗口,来分别拜见里面包车型地铁界别,差异上边已经计算了,上面大家来会见JS代码如下:

JavaScript

<script> // sessionStorage demo $("#saveData").unbind('click').bind('click',function(){ var inputVal = $("#input").val(); sessionStorage.setItem("message",inputVal); //localStorage.setItem("message",inputVal); }); $("#readData").unbind("click").bind('click',function(){ var msg = sessionStorage.getItem("message"); //var msg = localStorage.getItem("message"); $("#msg").html(msg); }); $("#removeData").unbind('click').bind('click',function(){ sessionStorage.removeItem("message"); //localStorage.removeItem("message"); }); $("#clearData").unbind('click').bind('click',function(){ sessionStorage.clear(); //localStorage.clear(); }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
        // sessionStorage demo
        $("#saveData").unbind('click').bind('click',function(){
            var inputVal = $("#input").val();
            sessionStorage.setItem("message",inputVal);
            //localStorage.setItem("message",inputVal);
        });
        $("#readData").unbind("click").bind('click',function(){
            var msg = sessionStorage.getItem("message");
            //var msg = localStorage.getItem("message");
            $("#msg").html(msg);
        });
        $("#removeData").unbind('click').bind('click',function(){
            sessionStorage.removeItem("message");
            //localStorage.removeItem("message");
        });
        $("#clearData").unbind('click').bind('click',function(){
            sessionStorage.clear();
            //localStorage.clear();
        });
</script>

如上的代码,大家今后前赴后继来寻访效果如下:使用

sessionStorage效果请点击:

使用localStorage效果请点击:

我们还足以做一些错落有致的运用,举举个例子下一个表格有一点点字段,举例姓名,email,tel,及备注字段,大家先保存到本地去,然后依据姓名那些字段举办寻觅就足以搜索到数量到,大家得以称作那是大约的地面数据库,如下代码:

XHTML

<table> <tr> <td>姓名:</td> <td> <input type="text" id="name"/> </td> </tr> <tr> <td>EMALL:</td> <td> <input type="text" id="email"/> </td> </tr> <tr> <td>电话号码:</td> <td> <input type="text" id="tel"/> </td> </tr> <tr> <td>备注:</td> <td> <input type="text" id="memo"/> </td> </tr> <tr> <td>保存</td> <td> <input type="button" id="save" value="保存"/> </td> </tr> </table> <p> 检索:<input type="text" id="file"/> <input type="button" id="find" value="检索"/> </p> <p id="msg"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
    <tr>
        <td>姓名:</td>
        <td>
            <input type="text" id="name"/>
        </td>
    </tr>
    <tr>
        <td>EMALL:</td>
        <td>
            <input type="text" id="email"/>
        </td>
    </tr>
    <tr>
        <td>电话号码:</td>
        <td>
            <input type="text" id="tel"/>
        </td>
    </tr>
    <tr>
        <td>备注:</td>
        <td>
            <input type="text" id="memo"/>
        </td>
    </tr>
    <tr>
        <td>保存</td>
        <td>
           <input type="button" id="save" value="保存"/>
        </td>
    </tr>
</table>
<p>
     检索:<input type="text" id="file"/>
     <input type="button" id="find" value="检索"/>
</p>
<p id="msg"></p>

JS代码如下:

JavaScript

// 保存数据 $("#save").unbind('click').bind('click',function(){ var data = new Object; data.name = $("#name").val(); data.email = $("#email").val(); data.tel = $("#tel").val(); data.memo = $("#memo").val(); var str = JSON.stringify(data); localStorage.setItem(data.name,str); alert("数据现已保存"); }); // 检索数据 $("#find").unbind('click').bind('click',function(){ var find = $("#file").val(); var str = localStorage.getItem(find); var data = JSON.parse(str); var result = "姓名:" data.name "</br>"; result = "Email: " data.email "</br>"; result = "tel:" data.tel "</br>"; result = "备注:" data.memo "</br>"; $("#msg").html(result); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//  保存数据
$("#save").unbind('click').bind('click',function(){
     var data = new Object;
     data.name = $("#name").val();
     data.email = $("#email").val();
     data.tel = $("#tel").val();
     data.memo = $("#memo").val();
     var str = JSON.stringify(data);
     localStorage.setItem(data.name,str);
     alert("数据已经保存");
});
 
// 检索数据
$("#find").unbind('click').bind('click',function(){
      var find = $("#file").val();
      var str = localStorage.getItem(find);
      var data = JSON.parse(str);
      var result = "姓名:" data.name "</br>";
          result = "Email: " data.email "</br>";
          result = "tel:" data.tel "</br>";
          result = "备注:" data.memo "</br>";
      $("#msg").html(result);
  });

demo如下效果:

请点击查阅:

六:window.name 完成跨域数据传输。

Window.name 中的name值在区别的页面(以致分化的域名)加载后依然存在,並且数据量能够高达2MB。

Window.name 数据传输的基本原理:

同域下:Name在浏览器境遇中是三个大局/window对象的性质,且当在ifrmae中加载页面时,name的属性值依然保持不改变。

比方说大家在同域下abc.example.com下 有2个页面 app.html 和 data.html

 App.html页面代码嵌套一个iframe data.html页面,代码如下:

XHTML

<iframe src="" id="iframe"/>

1
<iframe src="http://abc.example.com/demo/tugenhua0707/storage/data.html" id="iframe"/>

其间data.html 页面 使用一个window.name = “111”;来保存数据。

   未来大家接下去在app.html页面 如何来调用同域下的data.html下的window.name的数目,首先我们先要获取到这一个iframe,然后决断iframe是或不是加载完,加载完后就赢得那些iframe中的window.name, 

App.html JS的代码如下:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) { iframe.attachEvent('onload',function(){ callback & callback(); }); }else { iframe.onload = function(){ callback & callback(); } } } var iframe = document.getElementById("iframe"); // 同域下 iframeIsLoad(iframe,function(){ var data = iframe.contentWindow.name; alert(data); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
         iframe.attachEvent('onload',function(){
          callback & callback();
         });
    }else {
        iframe.onload = function(){
         callback & callback();
        }
    }
}
var iframe = document.getElementById("iframe");
// 同域下
iframeIsLoad(iframe,function(){
    var data = iframe.contentWindow.name;
        alert(data);
});

2. 跨域下:

   未来大家使用hosts文件来绑定2个IP 来演示下跨域的场地,在hosts文件绑定如下:

   127.0.0.1  abc.example.com  和 127.0.0.1 def.example.com

   大家后日在 abc.example.com 新建多个app.html页面 里面或然嵌套贰个 def.example.com域下的 data.html页面,代码如下:

   App.html代码如下:

XHTML

<iframe src="" id="iframe"/>

1
<iframe src="http://def.example.com/demo/tugenhua0707/storage/data.html" id="iframe"/>

万一我们还是和地方的方式取多少的话 明显报错跨域了,以往咱们是选择window.name消除跨域下多少的传导,那么大家得以接纳三个同域abc.example.com下的代办页面proxy.html来做拍卖,通过在def.example.com域下的data.html页面加载一个与abc.example.com同域下的proxy.html页面, 将该对象页面设置iframe的name属性,因为app.html 与 proxy.html是在同三个域下,所以大家得以拿走到。

在app.html页面 JS代码如下:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) { iframe.attach伊夫nt('onload',function(){ callback & callback(); }); }else { iframe.onload = function(){ callback & callback(); } } } var iframe = document.getElementById("iframe"); var state = 0; // 跨域下 iframeIsLoad(iframe,function(){ if (state === 1) { var data = iframe.contentWindow.name; // 读取数据 alert(data); //弹出111 } else if (state === 0) { state = 1; iframe.contentWindow.location = ""; // 设置的代办理文件件 } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
        iframe.attachEvent('onload',function(){
             callback & callback();
        });
    }else {
        iframe.onload = function(){
             callback & callback();
         }
     }
}      
var iframe = document.getElementById("iframe");
var state = 0;
// 跨域下
iframeIsLoad(iframe,function(){
   if (state === 1) {
        var data = iframe.contentWindow.name;    // 读取数据
        alert(data);    //弹出111
   } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://abc.example.com/demo/tugenhua0707/storage/proxy.html";    // 设置的代理文件
   }  
});

自然如上:大家只要name数据现已拿到了的话,未来无需的话,大家能够销毁掉,清空等操作。

七:使用HTML5中postMessage 完毕ajax中的POST跨域难题

浏览器扶助程度:IE8 ,firefox4 ,chrome8   opera10

     1. 首先,要想接收从别的的窗口发过来的新闻,就不能够不对窗口对象的message事件举办监听,如下代码:

          window.addEventListener(“message”, function(){},false);

     2. 帮助,供给选取window对象的postMessage方法向其余窗口发送音讯,该措施定义如下所示:

         otherWindow.postMessage(message, targetOrigin);

该措施应用2个参数,第3个参数为所发送的音讯文本,但也能够是任何javascript对象,第2个参数是收到消息的目的窗口的url地址

(例如:http:127.0.0.1:8080/) , 不过我们也足以在url地址字符串中利用通配符”*”, 钦命全体的域下,可是我们照旧提出利用一定的域名下,

otherWindow为要发送窗口对象的援用。

Demo演示:

     尽管现在自己在hosts文件下 ,绑定2 个域名如下:

     127.0.0.1       abc.example.com

     127.0.0.1        longen.example.com

将来借使在abc.example.com域下有三个abc.html页面,在longen.example.com域下有def.html页面,以往本身是希望那2个不一样域名下的页面

能相互通讯,abc.html代码如下:

XHTML

<form> <p> <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个音信:</label> <input type="text" name="message" value="send" id="message" /> <input type="submit" value="submit" id="submit"/> </p> </form> <h4>目的iframe传来的音讯:</h4> <p id="test">暂无音信</p> <iframe id="iframe" src="" style="display:none"></iframe>

1
2
3
4
5
6
7
8
9
10
<form>  
      <p>  
        <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" value="submit" id="submit"/>  
      </p>  
</form>  
<h4>目标iframe传来的信息:</h4>  
<p id="test">暂无信息</p>  
<iframe id="iframe" src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

JS代码如下:

JavaScript

var win = document.getElementById("iframe").contentWindow; document.getElementById("submit").onclick = function(e){ e.preventDefault(); win.postMessage(document.getElementById("message").value,""); } window.addEventListener("message",function(e){ e.preventDefault(); document.getElementById("test").innerHTML = "从" e.origin "这里传过来的音信:n" e.data; },false);

1
2
3
4
5
6
7
8
9
10
var win = document.getElementById("iframe").contentWindow;    
document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"http://longen.example.com");
}  
 
window.addEventListener("message",function(e){
     e.preventDefault();
     document.getElementById("test").innerHTML = "从" e.origin "那里传过来的消息:n" e.data;
},false);

Def.html代码如下:

HTML代码:

XHTML

<form> <p> <label for="message">给父窗口abc.html发个消息:</label> <input type="text" name="message" value="send" id="message" /> <input type="submit" /> </p> </form> <p id="test2">暂无音讯。</p>

1
2
3
4
5
6
7
8
<form>  
      <p>  
        <label for="message">给父窗口abc.html发个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" />  
      </p>  
</form>  
<p id="test2">暂无信息。</p>

JS代码如下:

JavaScript

var parentwin = window.parent; window.add伊夫ntListener("message",function(e){ document.getElementById("test2").innerHTML = "从父窗口传来的域" e.origin ",和剧情数据:" e.data; parentwin.postMessage('HI!你给小编发了"' e.data '"。',""); },false);

1
2
3
4
5
var parentwin = window.parent;
window.addEventListener("message",function(e){
       document.getElementById("test2").innerHTML = "从父窗口传来的域" e.origin ",和内容数据:" e.data;  
       parentwin.postMessage('HI!你给我发了"' e.data '"。',"http://abc.example.com");
},false);

当笔者点击abc.html页面后,能够看看效果如下,从def.html重返内容了。如下:

澳门新萄京官方网站 5

我们必要知道如下几条消息:

1. 经过对window对象的message事件进行监听,能够收起音信。

2. 通过访谈message事件的origin属性,能够获取音讯的发送源。

3. 因此访谈message事件的data属性,能够获得音信内容。

4. 运用postMessage方法发送新闻。

5. 经过访谈message事件的source属性,能够收获音信发送源的窗口对象(正确的说,应该是窗口的代理对象)。

有了上边包车型客车中坚知识点,我们得以拉开为促成ajax POST跨域的难题。

2. 用到postMessage 知识点消除 ajax中POST跨域难点。

 原理:原理也相当粗略,假使我们的域名abc.example.com下的abc.html页面必要发ajax诉求(跨域,域名叫longen.example.com)下,那么大家照旧先跨页面文书档案的样式,和上面同样,大家得以明日longen.example.com下 创立一个页面,例如叫def.html. 那么大家今后如故在 abc.html 页面嵌入三个遮蔽域iframe src路线指向longen.example.com域下def,html页面。进度大概和跨文档类似,

 只是前日在def.html页面中 在window.onmessage 事件内写ajax乞求就能够,如下代码:

abc.example.com下的abc.html页面如下:

html代码和地点同样,下边是JS代码:

JavaScript

var win = document.getElementById("iframe").contentWindow; document.getElementById("submit").onclick = function(e){ e.preventDefault(); win.postMessage(document.getElementById("message").value,""); } window.addEventListener("message",function(e){ e.preventDefault(); alert(typeof e.data) var json = JSON.parse(e.data); console.log(json); alert(json.url) },false);

1
2
3
4
5
6
7
8
9
10
11
12
var win = document.getElementById("iframe").contentWindow;      
document.getElementById("submit").onclick = function(e){
      e.preventDefault();
      win.postMessage(document.getElementById("message").value,"http://longen.example.com/");
}    
window.addEventListener("message",function(e){
    e.preventDefault();
    alert(typeof e.data)
    var json = JSON.parse(e.data);
     console.log(json);
    alert(json.url)
},false);

def.html代码如下:

JS代码如下:

JavaScript

//获取跨域数据 window.onmessage = function(e){ $.ajax({ url: '', type:'POST', dataType:'text', //data: {msg:e.data}, success: function(res) { var parentwin = window.parent; parentwin.postMessage(res," } }); };

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取跨域数据  
window.onmessage = function(e){  
     $.ajax({
          url: 'http://longen.example.com/webSocket/test.php',
          type:'POST',
          dataType:'text',
          //data: {msg:e.data},
          success: function(res) {
               var parentwin = window.parent;  
               parentwin.postMessage(res,"http://abc.example.com");//跨域发送数据  
          }
      });
};

test.php代码如下:

PHP

<?php $data=array( url =>1, name =>'2', 'xx-xx'=>"xx" ); echo json_encode($data); ?>

1
2
3
4
5
6
7
8
<?php
    $data=array(  
     url =>1,
      name =>'2',
      'xx-xx'=>"xx"
);
echo json_encode($data);
?>

如上完毕方式 就能够完毕ajax post跨域了。

1 赞 8 收藏 1 评论

澳门新萄京官方网站 6

在js中常用的跨域诉求包含有各个,分别为:window.name、JSONP、jQuery.getJSON、flash跨域这种方法,第一种是使用iframe,第二与三种接纳的是json数据,最后一种是xml文件操作,下边笔者来简介一下。

后面一个常见跨域消除方案(全)

2017/09/14 · 基本功技术 · 3 评论 · 跨域

原稿出处: 安静de沉淀   

本作品来给大家计算一下有关在js中框架(iframe)之间交互传值程序代码,从大家最常用的办法到自家写了三个函数及末端的iframe跨域传值的片段主意计算。

哪些是跨域?

一、window.name

怎么着是跨域?

跨域是指一个域下的文书档案或脚本计划去央浼另三个域下的财富,这里跨域是广义的。

广义的跨域:

1.) 财富跳转: A链接、重定向、表单提交 2.) 财富嵌入:<link>、<script>、<img>、<frame>等dom标签,还大概有样式中background:url()、@font-face()等文件外链 3.) 脚本央浼: js发起的ajax央求、dom和js对象的跨域操作等

1
2
3
1.) 资源跳转: A链接、重定向、表单提交
2.) 资源嵌入:<link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等

实在大家日常所说的跨域是狭义的,是由浏览器同源攻略限制的一类央求场景。

哪些是同源战略?
同源战术/SOP(Same origin policy)是一种约定,由Netscape公司1994年引进浏览器,它是浏览器最宗旨也最主旨的平安作用,即便缺少了同源攻略,浏览器很轻巧碰着XSS、CSFENCORE等攻击。所谓同源是指”协议 域名 端口”三者一致,纵然多个不等的域名指向同二个ip地址,也非同源。

同源计谋限制之下两种行为:

1.) Cookie、LocalStorage 和 IndexDB 不能读取 2.) DOM 和 Js对象不恐怕获取 3.) AJAX 央求无法发送

1
2
3
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

成千上万框架存在父亲和儿子关系,操作起来特别烦劳,相当多校友平时出现那样悲催的代码:

 

1、 服务器再次回到

科学普及跨域场景

UCRUISERL 表明 是不是允许通讯 同一域名,分歧文件或路线 允许 同一域名,不一样端口 不容许 同一域名,区别协商 不允许 域名和域名对应同样ip 差异意 主域同样,子域分裂差别意 不相同域名 不容许

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名,不同文件或路径           允许
http://www.domain.com/lab/c.js
 
http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名,不同端口                不允许
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名,不同协议                不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同,子域不同                不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

 代码如下

跨域是指一个域下的文书档案或脚本计划去央浼另三个域下的财富,这里跨域是广义的。

 代码如下

跨域化解方案

1、 通过jsonp跨域
2、 document.domain iframe跨域
3、 location.hash iframe
4、 window.name iframe跨域
5、 postMessage跨域
6、 跨域能源分享(CO奥迪Q3S)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协和跨域

复制代码

 

复制代码

一、 通过jsonp跨域

普普通通为了减轻web服务器的载重,大家把js、css,img等静态能源分离到另一台独立域名的服务器上,在html页面中再经过相应的竹签从分裂域名下加载静态财富,而被浏览器允许,基于此原理,大家得以因此动态创制script,再央浼一个带参网站完毕跨域通讯。

1.)原生实现:

<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 传参并钦赐回调实践函数为onBack script.src = ''; document.head.appendChild(script); // 回调推行函数 function onBack(res) { alert(JSON.stringify(res)); } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
 
    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
</script>

服务端再次回到如下(再次来到时即实行全局函数):

onBack({"status": true, "user": "admin"})

1
onBack({"status": true, "user": "admin"})

2.)jquery ajax:

$.ajax({ url: '', type: 'get', dataType: 'jsonp', // 乞求情势为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {} });

1
2
3
4
5
6
7
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

3.)vue.js:

this.$http.jsonp('', { params: {}, jsonp: 'onBack' }).then((res) => { console.log(res); })

1
2
3
4
5
6
this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res);
})

后端node.js代码示例:

var querystring = require('querystring'); var http = require('http'); var server = http.createServer(); server.on('request', function(req, res) { var params = qs.parse(req.url.split('?')[1]); var fn = params.callback; // jsonp重临设置 res.writeHead(200, { 'Content-Type': 'text/javascript' }); res.write(fn '(' JSON.stringify(params) ')'); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var querystring = require('querystring');
var http = require('http');
var server = http.createServer();
 
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
 
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn '(' JSON.stringify(params) ')');
 
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');

jsonp瑕玷:只可以兑现get一种央浼。

window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;

广义的跨域:

<script>window.name=’{“id”:”3″, “name”:”leisure”}’;</script>

二、 document.domain iframe跨域

此方案只限主域相同,子域不一致的跨域应用场景。

兑现原理:七个页面都因此js强制设置document.domain为根基主域,就完毕了同域。

1.)父窗口:(

<iframe id="iframe" src="; <script> document.domain = 'domain.com'; var user = 'admin'; </script>

1
2
3
4
5
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.)子窗口:(

<script> document.domain = 'domain.com'; // 获取父窗口中变量 alert('get js data from parent ---> ' window.parent.user); </script>

1
2
3
4
5
<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' window.parent.user);
</script>

看二个本人本人做的实例

 

2、定义三个iframe,增加onload事件 <iframe id=”iframe1″ onload=”iLoad”><iframe>

三、 location.hash iframe跨域

兑现原理: a欲与b跨域相互通讯,通过中间页c来落到实处。 八个页面,差别域之间利用iframe的location.hash传值,相同域之间一直js访谈来通讯。

具体贯彻:A域:a.html -> B域:b.html -> A域:c.html,a与b分裂域只好通过hash值单向通讯,b与c也差异域也只可以单向通讯,但c与a同域,所以c可经过parent.parent访问a页面全数目的。

1.)a.html:(

<iframe id="iframe" src="" style="display:none;"></iframe> <script>     var iframe = document.getElementById('iframe');     // 向b.html传hash值     setTimeout(function() {         iframe.src = iframe.src '#user=admin';     }, 一千);          // 开放给同域c.html的回调方法     function onCallback(res) {         alert('data from c.html ---> ' res);     } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe&gt
<script>
    var iframe = document.getElementById('iframe');
 
    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' res);
    }
</script>

2.)b.html:(

<iframe id="iframe" src="" style="display:none;"></iframe> <script>     var iframe = document.getElementById('iframe');     // 监听a.html传来的hash值,再传给c.html     window.onhashchange = function () {         iframe.src = iframe.src location.hash;     }; </script>

1
2
3
4
5
6
7
8
9
<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
 
    // 监听a.html传来的hash值,再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src location.hash;
    };
</script>

3.)c.html:(

<script>     // 监听b.html传来的hash值     window.onhashchange = function () {         // 再经过操作同域a.html的js回调,将结果传到         window.parent.parent.onCallback('hello: ' location.hash.replace('#user=', ''));     }; </script>

1
2
3
4
5
6
7
<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调,将结果传回
        window.parent.parent.onCallback('hello: ' location.hash.replace('#user=', ''));
    };
</script>

iframe的调用包涵以下多少个方面:(调用包罗html dom,js全局变量,js方法)

1.) 能源跳转: A链接、重定向、表单提交

 代码如下

四、 window.name iframe跨域

window.name属性的离奇之处:name值在分歧的页面(以至差异域名)加载后照旧存在,並且能够援救极其长的 name 值(2MB)。

1.)a.html:(

var proxy = function(url, callback) { var state = 0; var iframe = document.createElement('iframe'); // 加载跨域页面 iframe.src = url; // onload事件会触发2次,第1次加载跨域页,并存在数据于window.name iframe.onload = function() { if (state === 1) { // 第2次onload(同域proxy页)成功后,读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame(); } else if (state === 0) { // 第1次onload(跨域页)成功后,切换成同域代理页面 iframe.contentWindow.location = ''; state = 1; } }; document.body.appendChild(iframe); // 获取数据未来销毁这些iframe,释放内存;这也是有限帮衬了安全(不被别的域frame js访问) function destoryFrame() { iframe.contentWindow.document.write(''); iframe.contentWindow.close(); document.body.removeChild(iframe); } }; // 要求跨域b页面数据 proxy('', function(data){ alert(data); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
 
    // 加载跨域页面
    iframe.src = url;
 
    // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后,读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();
 
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后,切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };
 
    document.body.appendChild(iframe);
 
    // 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
 
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

2.)proxy.html:(http://www.domain1.com/proxy….)
高级中学档代理页,与a.html同域,内容为空就可以。

3.)b.html:(

<script>     window.name = 'This is domain2 data!'; </script>

1
2
3
<script>
    window.name = 'This is domain2 data!';
</script>

总计:通过iframe的src属性由国外转向本地方,跨域数据即由iframe的window.name从海外传递到当地方。那个就高明地绕过了浏览器的跨域访谈限制,但还要它又是高枕而卧操作。

主页面调用iframe;

2.) 财富嵌入:<link>、<script>、<img>、<frame>等dom标签,还应该有样式中background:url()、@font-face()等文件外链

复制代码

五、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 第22中学的API,且是为数非常的少能够跨域操作的window属性之一,它可用来化解以下地点的难题:
a.) 页面和其张开的新窗口的多少传递
b.) 多窗口之间新闻传递
c.) 页面与嵌套的iframe音信传递
d.) 上边多少个现象的跨域数据传递

用法:postMessage(data,origin)方法接受五个参数
data: html5标准扶助大肆基本项目或可复制的目的,但部分浏览器只协助字符串,所以传参时最佳用JSON.stringify()连串化。
origin: 协议 主机 端口号,也足以安装为”*”,表示能够传递给自由窗口,假若要钦定和当下窗口同源的话设置为”/”。

1.)a.html:(

<iframe id="iframe" src="" style="display:none;"></iframe> <script> var iframe = document.getElementById('iframe'); iframe.onload = function() { var data = { name: 'aym' }; // 向domain2传送跨域数据 iframe.contentWindow.postMessage(JSON.stringify(data), ''); }; // 接受domain2重返数据 window.addEventListener('message', function(e) { alert('data from domain2 ---> ' e.data); }, false); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>      
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
 
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' e.data);
    }, false);
</script>

2.)b.html:(

<script> // 接收domain1的数码 window.addEventListener('message', function(e) { alert('data from domain1 ---> ' e.data); var data = JSON.parse(e.data); if (data) { data.number = 16; // 管理后再发回domain1 window.parent.postMessage(JSON.stringify(data), ''); } }, false); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' e.data);
 
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
 
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

iframe页面调用主页面;

3.) 脚本乞请: js发起的ajax乞求、dom和js对象的跨域操作等

<script type=”text/javascript”>
var load = false;
function iLoad() {
if(load == false) {
// 同域管理,要求后会再一次重复加载iframe
document.getElementById(‘iframe1′).contentWindow.location = ‘/’;
load = true;
} else {
// 获取window.name的剧情,注意必须进行同域管理后方可访问!
var data = document.getElementById(‘iframe1′).contentWindow.name;
alert(data); // {“id”:”3″, “name”:”leisure”}
load = false;
}
}
</script>

六、 跨域财富分享(COLANDS)

常见跨域央求:只服务端设置Access-Control-Allow-Origin就可以,前端无须设置。
带cookie央浼:前后端都亟待设置字段,别的需注意:所带cookie为跨域央求接口所在域的cookie,而非当前页。
最近,全体浏览器都支持该效用(IE8 :IE8/9内需选取XDomainRequest对象来支撑CO冠道S)),COEnclaveS也曾经成为主流的跨域消除方案。

主页面包车型地铁蕴含的iframe之间相互调用;

 

3、定义二个form,设置form的target为iframe的id,然后交给form

1、 前端设置:

1.)原生ajax

// 前端安装是不是带cookie xhr.withCredentials = true;

1
2
// 前端设置是否带cookie
xhr.withCredentials = true;

亲自过问代码:

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容 // 前端安装是不是带cookie xhr.withCredentials = true; xhr.open('post', '', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=admin'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.)jQuery ajax

$.ajax({ ... xhrFields: { withCredentials: true // 前端安装是或不是带cookie }, crossDomain: true, // 会让乞求头中包括跨域的额外音信,但不会含cookie ... });

1
2
3
4
5
6
7
8
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息,但不会含cookie
    ...
});

3.)vue框架
在vue-resource封装的ajax组件中投入以下代码:

Vue.http.options.credentials = true

1
Vue.http.options.credentials = true

 

骨子里大家平常所说的跨域是狭义的,是由浏览器同源计谋限制的一类伏乞场景。

 代码如下

2、 服务端设置:

若后端设置成功,前端浏览器调节台则不汇合世跨域报错音信,反之,表达没设成功。

1.)Java后台:

/* * 导入包:import javax.servlet.http.HttpServletResponse; * 接口参数中定义:HttpServletResponse response */ response.setHeader("Access-Control-Allow-Origin", ""); // 若有端口需写全(协议 域名 端口) response.setHeader("Access-Control-Allow-Credentials", "true");

1
2
3
4
5
6
/*
* 导入包:import javax.servlet.http.HttpServletResponse;
* 接口参数中定义:HttpServletResponse response
*/
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需写全(协议 域名 端口)
response.setHeader("Access-Control-Allow-Credentials", "true");

2.)Nodejs后台示例:

var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var postData = ''; // 数据块接收中 req.addListener('data', function(chunk) { postData = chunk; }); // 数据接收达成 req.addListener('end', function() { postData = qs.parse(postData); // 跨域后台装置 res.writeHead(200, { 'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie 'Access-Control-Allow-Origin': '', // 允许访谈的域(协议 域名 端口) 'Set-Cookie': 'l=a123456;帕特h=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本不能够读取cookie }); res.write(JSON.stringify(postData)); res.end(); }); }); server.listen('8080'); console.log('Server is running at port 8080...');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var postData = '';
 
    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData = chunk;
    });
 
    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);
 
        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域(协议 域名 端口)
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取cookie
        });
 
        res.write(JSON.stringify(postData));
        res.end();
    });
});
 
server.listen('8080');
console.log('Server is running at port 8080...');

主要知识点

 

复制代码

七、 nginx代理跨域

1:document.getElementById("ii").contentWindow 获得iframe对象后,就足以经过contentWindow得到iframe包涵页面包车型大巴window对象,然后就能够平常访谈页面成分了;

怎么是同源战略?

<form action=”url” method=”POST” target=”iframe1″>
<button type=”submit” value=”submit” />
</form>

1、 nginx配置化解iconfont跨域

浏览器跨域访谈js、css、img等常规静态能源被同源攻略准许,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态财富服务器中参预以下配置。

location / { add_header Access-Control-Allow-Origin *; }

1
2
3
location / {
  add_header Access-Control-Allow-Origin *;
}

2:$("#ii")[0].contentWindow  借使用jquery选用器获得iframe,须求加三个【0】;

 

二、JSONP

2、 nginx反向代理接口跨域

跨域原理: 同源攻略是浏览器的安全计谋,不是HTTP协议的一局地。服务器端调用HTTP接口只是接纳HTTP协议,不会进行JS脚本,无需同源计谋,也就不设有越过难题。

完结思路:通过nginx配置二个代理服务器(域名与domain1同样,端口不相同)做跳板机,反向代理访谈domain2接口,并且能够顺便修改cookie中domain音讯,方便当前域cookie写入,达成跨域登入。

nginx具体陈设:

#proxy服务器 server { listen 81; server_name www.domain1.com; location / { proxy_pass ; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名 index index.html index.htm; # 当用webpack-dev-server等中间件代理接口访谈nignx时,此时无浏览器参预,故并未有同源限制,上边的跨域配置可不启用 add_header Access-Control-Allow-Origin ; #当下端只跨域不带cookie时,可为* add_header Access-Control-Allow-Credentials true; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
 
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
 
        # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

1.) 前端代码示例:

var xhr = new XMLHttpRequest(); // 前端按键:浏览器是还是不是读写cookie xhr.withCredentials = true; // 访谈nginx中的代理服务器 xhr.open('get', '', true); xhr.send();

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest();
 
// 前端开关:浏览器是否读写cookie
xhr.withCredentials = true;
 
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

2.) Nodejs后台示例:

var http = require('http'); var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) { var params = qs.parse(req.url.substring(2)); // 向前台写cookie res.writeHead(200, { 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本不能够读取 }); res.write(JSON.stringify(params)); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var http = require('http');
var server = http.createServer();
var qs = require('querystring');
 
server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));
 
    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });
 
    res.write(JSON.stringify(params));
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');

3:$("#ii")[0].contentWindow.$("#dd").val() 可以在收获iframe的window对象后接着使用jquery选用器实行页面操作;

同源计谋/SOP(萨姆e origin policy)是一种约定,由Netscape集团一九九一年引进浏览器,它是浏览器最核心也最宗旨的平安功用,倘若贫乏了同源计谋,浏览器很轻便蒙受XSS、CSF普拉多等攻击。所谓同源是指”协议 域名 端口”三者一致,固然四个不等的域名指向同多个ip地址,也非同源。

服务器重临

八、 Nodejs中间件代理跨域

node中间件完毕跨域代理,原理大约与nginx一样,都以通过启三个代理服务器,完毕多少的转会。

4:$("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa"; 可以经过这种艺术向iframe页面传递参数,在iframe页面window.hellobaby就能够获得到值,hellobaby是自定义的变量;

 

 代码如下

1、 非vue框架的跨域(2次跨域)

使用node express http-proxy-middleware搭建叁个proxy服务器。

1.)前端代码示例:

var xhr = new XMLHttpRequest(); // 前端按键:浏览器是不是读写cookie xhr.withCredentials = true; // 访谈http-proxy-middleware代理服务器 xhr.open('get', '', true); xhr.send();

1
2
3
4
5
6
7
8
var xhr = new XMLHttpRequest();
 
// 前端开关:浏览器是否读写cookie
xhr.withCredentials = true;
 
// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

2.)中间件服务器:

var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); app.use('/', proxy({ // 代理跨域指标接口 target: '', changeOrigin: true, // 修改响应头音信,达成跨域并同意带cookie onProxyRes: function(proxyRes, req, res) { res.header('Access-Control-Allow-Origin', ''); res.header('Access-Control-Allow-Credentials', 'true'); }, // 修改响应消息中的cookie域名 cookieDomainRewrite: 'www.domain1.com' // 可以为false,表示不修改 })); app.listen(贰仟); console.log('Proxy server is listen at port 3000...');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
 
app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,
 
    // 修改响应头信息,实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },
 
    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
}));
 
app.listen(3000);
console.log('Proxy server is listen at port 3000...');

3.)Nodejs后台同(六:nginx)

5:在iframe页面通过parent能够赢得主页面包车型大巴window,接着就足以健康访谈老爸页面包车型客车因素了;

同源战术限制之下三种行为:

复制代码

2、 vue框架的跨域(1次跨域)

选拔node webpack webpack-dev-server代理接口跨域。在支付境遇下,由于vue渲染服务和接口代理服务都以webpack-dev-server同二个,所以页面与代理接口之间不再跨域,无须设置headers跨域消息了。

webpack.config.js部分配置:

module.exports = { entry: {}, module: {}, ... devServer: { historyApiFallback: true, proxy: [{ context: '/login', target: '', // 代理跨域指标接口 changeOrigin: true, cookieDomainRewrite: 'www.domain1.com' // 可以为false,表示不修改 }], noInfo: true } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
        }],
        noInfo: true
    }
}

6:parent.$("#ii")[0].contentWindow.ff; 同级iframe页面之间调用,须求先取得老爹的window,然后调用同级的iframe获得window实行操作;

 

 callback({“id”: “3″, “name”: “leisure”});
<script type=”text/javascript”>
function callback(data) {
alert(data);
}
</script>
<script type=”text/javascript” src=”;

九、 WebSocket切磋跨域

WebSocket protocol是HTML5一种新的情商。它实现了浏览器与服务器全双工通讯,同一时间允许跨域通信,是server push工夫的一种很好的兑现。
原生WebSocket API使用起来不太平价,大家使用Socket.io,它很好地包裹了webSocket接口,提供了更简约、灵活的接口,也对不帮忙webSocket的浏览器提供了向下包容。

1.)前端代码:

<div>user input:<input type="text"></div> <script src="./socket.io.js"></script> <script> var socket = io(''); // 连接成功拍卖 socket.on('connect', function() { // 监听服务端新闻 socket.on('message', function(msg) { console.log('data from server: ---> ' msg); }); // 监听服务端关闭 socket.on('disconnect', function() { console.log('Server socket has closed.'); }); }); document.getElementsByTagName('input')[0].onblur = function() { socket.send(this.value); }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>user input:<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
 
// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' msg);
    });
 
    // 监听服务端关闭
    socket.on('disconnect', function() {
        console.log('Server socket has closed.');
    });
});
 
document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

2.)Nodejs socket后台:

var http = require('http'); var socket = require('socket.io'); // 启http服务 var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html' }); res.end(); }); server.listen('8080'); console.log('Server is running at port 8080...'); // 监听socket连接 socket.listen(server).on('connection', function(client) { // 接收消息 client.on('message', function(msg) { client.send('hello:' msg); console.log('data from client: ---> ' msg); }); // 断开处理 client.on('disconnect', function() { console.log('Client socket has closed.'); }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require('http');
var socket = require('socket.io');
 
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
 
server.listen('8080');
console.log('Server is running at port 8080...');
 
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello:' msg);
        console.log('data from client: ---> ' msg);
    });
 
    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.');
    });
});

3 赞 13 收藏 3 评论

澳门新萄京官方网站 7

 

1.) Cookie、LocalStorage 和 IndexDB 无法读取

源码

2.) DOM 和 Js对象不能够获得

PHP页面重返的JSONP格式应该是那样的:

main.html

3.) AJAX 伏乞不可能发送

 代码如下

 代码如下

 

复制代码

复制代码

广大跨域场景

<?php
 echo $_GET["callback"].'
 (
    {
        title: "The Principles of Beautiful Web Design, 2nd Edition",
        url: "",
        author: "Jason Beaird",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 39.95
         }
 }
 );
 '
?>

?<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>展现图表</title>
<script src="/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var gg="dsafdsafdsafdsafsdaf";
    function ggMM() {
        alert("2222222222222222222222222222222");
    }
    function callIframeMethod() {
        //document.getElementById("ii").contentWindow.test();
        $("#ii")[0].contentWindow.test(); //用jquery调用必要加叁个[0]
    }
    function callIframeField() {
        alert($("#ii")[0].contentWindow.ff);
    }
    function callIframeHtml() {
        alert($("#ii")[0].contentWindow.$("#dd").val());
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);
        //alert($("#ii")[0].contentWindow.document.getElementById("dd").value);             
    }   
    function giveParameter() {
        $("#ii")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
    }
</script>
</head>
<body>
    <a href="#" onClick="giveParameter();">参数字传送递</a>
    <a href="#" onClick="callIframeMethod();">调用子iframe方法</a>
    <a href="#" onClick="callIframeField();">调用子iframe变量</a>
    <a href="#" onClick="callIframeHtml();">调用子iframe组件</a></br>  
    <iframe id="ii" src="frame.htm" width="100%" frameborder="0"></iframe>
    <iframe id="new" src="newFrame.htm" width="100%" frameborder="0"></iframe>
</body>
</html>

 

而静态HTML发起呼吁的代码能够参见上面:

frame.htm

UEvoqueL                                      表达                    是或不是允许通讯

         同一域名,分歧文件或路线           允许

 

         同一域名,差异端口                不一致意

 

        同一域名,区别协商                分歧意

 

           域名和域名对应同样ip              不允许

 

           主域同样,子域分歧                不允许

 

        分化域名                         不允许

 代码如下

 代码如下

 

复制代码

复制代码

跨域解决方案

<script language="javascript" src="你的网站/zt/access_count/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="你的网站/zt/access_count/js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 insert_vote();
})

?<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>突显图表</title>
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
var ff="adfdasfdsafdsafdsaf";
function test() {
    alert($("#dd").val());
}
function callMainField() {
    alert(parent.gg);
}
function callMainMethod() {
    parent.ggMM();
}
function callMainHtml() {
    alert(parent.$("#ii").attr("id"));
}
function getParameter() {
    alert(window.hellobaby);
}
</script>
</head>
<body>
    <a href="#" onClick="getParameter();">接受参数</a>
    <a href="#" onClick="callMainMethod();">调用子iframe方法</a>
    <a href="#" onClick="callMainField();">调用主窗口变量</a>
    <a href="#" onClick="callMainHtml();">调用子iframe组件</a>   
    <input id="dd" type="text" value="1111111111"/>
</body>
</html>  

 

function insert_vote(){
 var j = null;
 $.ajax({
  type:'get',
  url:'你的网站/zt/access_count/jsonp.php',
  dataType:'jsonp',
  jsonp:"callback",
  data:{"a":"insert", "type":"aa", "time":"bb", "id":"dd", "allowVote":"cc"},
  async: false,
  success:function(data){
   j = data;
   //alert("1");
   alert(j.title);
  }
 }) 
}
 
function init(){
 $.ajax({
    dataType: 'jsonp',
    data: 'id=10',
    jsonp: 'jsonp_callback',
    url: '你的网站/zt/access_count/jsonp.php',
    success: function ()
     {
      // do stuff
   alert(jsonp.respond);
    },
 });
}

兄弟iframe页面 newIframe.htm

1、 通过jsonp跨域

function init2(){
 $.ajax({   
  async:false,   
   url: '你的网站/zt/access_count/jsonp.php',  // 跨域URL  
     type: 'GET',   
      dataType: 'jsonp',   
     jsonp: 'jsoncallback', //默认callback  
     data: 'id=10', //诉求数据  
      timeout: 5000,   
     beforeSend: function(){ 
   //jsonp 形式此方法不被触发。原因或者是dataType若是钦点为jsonp的话,就曾经不是ajax事件了  
      },  
     success: function(json) {
   //客户端jquery预先定义好的callback函数,成功得到跨域服务器上的json数据后,会动态实践那一个callback函数
   alert(json.respond.title);   
       if(json.actionErrors.length!=0)
   {   
          alert(json.actionErrors);   
         }   
  },   
  complete: function(XMLHttpRequest, textStatus){   
                
  },   
  error: function(xhr){   
               //jsonp 格局此办法不被触发  
               //哀求出错管理   
   alert("乞求出错(请检查相关度网络情形.)");   
  }   
 }); 
}
</script>

 代码如下

2、 document.domain iframe跨域

通用方法:

复制代码

3、 location.hash iframe

 代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>彰显图表</title>
<script src="/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function callLevelFrame() {
    var ff=parent.$("#ii")[0].contentWindow.ff;
    alert(ff);
}
</script>
</head>
<body>
    <a href="#" onClick="callLevelFrame();">调用兄弟iframe</a>   
    <input id="nn" type="text" value="sdafsdfsa"/>
</body>
</html>

4、 window.name iframe跨域

复制代码

实际上那个难题能够被大大的简化,框架应用中有二个一定不改变的窗口叫window.top,如果大家把多少缓存到那些页面,其下有所框架都足以拿走到,无论子页面怎么变幻。无需使用Cookie,也不须要利用什么样HTML5本地数据库计谋,你只供给各类页面援用一个js文件,内容如下:

5、 postMessage跨域

 // 开头化数据,同二个cookie一秒钟的访问量都算二遍
 function init_count(pageType, id){
  var j = null;
  $.ajax({ 
         type: "get",  //使用get方法访谈后台 
         dataType: "jsonp", //重返json格式的数据 
   jsonp:"callback",
         url: "", //要访谈的后台地址 
   data:{"opp":"main", "pageType":pageType, "id":id},
   async: false,
         success: function(data){ 
          //alert(data.total);
    //$('#pc_1').html(msg.total);
    $.each(data, function(i, v){
     var tmp = v.record.split(":");
     var month_view = tmp[tmp.length - 1];
     $("label[id=pc_" v.page_id "]").html(v.total);
     $("label[id=pcm_" v.page_id "]").html(v.week);
    }) 
         } 
     }) 
 }

 代码如下

6、 跨域财富分享(CO奥迪Q3S)

三、jQuery.getJSON

复制代码

7、 nginx代理跨域

JSON是三个轻量级的数据调换格式。JSON对于JavaScript开辟职员充满魅力的原由在于JSON自身便是Javascript中的对象

 
var share = {

8、 nodejs中间件代理跨域

先是大家来定义接口的行业内部,就好像那样:

 /**
  * 跨框架数据分享接口
  * @param {String} 存款和储蓄的数额名
  * @param {Any}  就要存储的私下数据(无此项则赶回被询问的数量)
  */
 data: function (name, value) {
  var top = window.top,
   cache = top['_CACHE'] || {};
  top['_CACHE'] = cache;
  
  return value !== undefined ? cache[name] = value : cache[name];
 },
 
 /**
  * 数据分享删除接口
  * @param {String} 删除的多少名
  */
 removeData: function (name) {
  var cache = window.top['_CACHE'];
  if (cache && cache[name]) delete cache[澳门新萄京官方网站:之间相互传值程序代码,前端常见跨域解决方案。name];
 }
 
};

9、 WebSocket会谈跨域

 

 

symbol是央求条件,callback是回调函数名称。

这么些一身数行的艺术能够共享大肆档案的次序的数据供种种框架页面读取,它与页面名称、层级毫毫无干系系,纵然几时框架页面层级被改换,你也统统不用挂念,它可正常干活。

一、 通过jsonp跨域

在页面文件中,大家选拔JQuery的支持:

譬喻,如我们能够在A页面存入分享数据:

 

服务器再次回到 json格式数据 test({“id”: “3″, “name”: “leisure”});

 代码如下

平常为了缓慢消除web服务器的负载,大家把js、css,img等静态财富分离到另一台独立域名的服务器上,在html页面中再经过相应的价签从分歧域名下加载静态财富,而被浏览器允许,基于此原理,大家得以经过动态创设script,再诉求贰个带参网址完成跨域通讯。

test函数名字为callback参数中定义

复制代码

 

 代码如下

share.data(‘myblog’, ‘);
share.data(‘editTitle’, function (val) {
document.title = val;
});

1.)原生完成:

复制代码

然后某框架页面大肆取A页面的数目

 

$.getJSON(url “?callback=?”, data, function(data) {
}

 代码如下

<script>

    var script = document.createElement('script');

    script.type = 'text/javascript';

 

    // 传参并钦定回调推行函数为onBack

    script.src = '';

    document.head.appendChild(script);

 

    // 回调推行函数

    function onBack(res) {

        alert(JSON.stringify(res));

    }

</script>

复制代码

 

 代码如下

alert(‘笔者的博客地址是: ‘ share.data(‘myblog’);
var editTitle = share.data(‘editTitle’);
editTitle(‘笔者一度得到到了数量’);

服务端重临如下(重临时即进行全局函数):

复制代码

实例夸域操作

 

//JQuery JSONP Support 
var url = ""; 
jQuery.getJSON(url, function(data){  alert("Symbol:" data.symbol ", Price:" data.price);  });

document.domain iframe的设置

onBack({"status": true, "user": "admin"})

注意callback=?那一个参数必须带上,jquery会自动生成三个函数名更迭这几个问号!jQuery.getJSON实际上是用了JSONP格局达成。

对此主域同样而子域分化的例子,能够透过设置document.domain的不二秘诀来减轻。具体的做法是能够在

‘a.com’;然后经过a.html文件中创建贰个iframe,去调控iframe的contentDocument,那样四个js文件之间就能够“交互”了。当然这种艺术只好缓和主域一样而二级域名差异的事态,如果你胡思乱想的把script.a.com的domian设为alibaba.com那肯定是会报错地!代码如下:

www.a.com上的a.html

 代码如下

复制代码

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = '';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这边操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script.a.com上的b.html

document.domain = 'a.com';这种格局适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面彼此通讯。

备注:某一页面包车型大巴domain暗中认可等于window.location.hostname。主域名是不带www的域名,举个例子a.com,主域名前边带前缀的一般都为二级域名或多种域名,例如www.a.com其实是二级域名。 domain只可以设置为主域名,不得以在b.a.com少校domain设置为c.a.com。

问题:
1、安全性,当二个站点(b.a.com)被口诛笔伐后,另三个站点(c.a.com)会挑起安全漏洞。
2、假如四个页面中引进两个iframe,要想能够操作全部iframe,必须都得设置同一domain。
2、动态成立script
就算如此浏览器私下认可禁止了跨域访谈,但并不禁止在页面中引用别的域的JS文件,并得以大肆实行引进的JS文件中的function(包含操作cookie、Dom等等)。依照那一点,能够一本万利地因此创建script节点的办法来促成完全跨域的通讯。具体的做法可以参谋YUI的Get Utility

此处推断script节点加载完结只怕蛮风趣的:ie只好通过script的readystatechange属性,别的浏览器是script的load事件。以下是某些判别script加载完结的方式。

 代码如下

复制代码

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback在此地实行
        js.onload = js.onreadystatechange = null;
    }
};

3、利用iframe和location.hash
那么些方法相比绕,不过可以减轻完全跨域意况下的步履置换难点。原理是选拔location.hash来开始展览传值。在url:

首先a.com下的文书cs1.html文件:

 代码如下

复制代码

function startRequest(){
    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = '';
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : '';
        if (console.log) {
            console.log('Now the data is ' data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

bKjia.c0m域名下的cs2.html:

 代码如下

复制代码

//模拟贰个简便的参数管理操作
switch(location.hash){
    case '#paramdo':
        callBack();
        break;
    case '#paramset':
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = 'somedata';
    } catch (e) {
        // ie、chrome的安全机制不能修改parent.location.hash,
        // 所以要使用三个中等的cnblogs域下的代理iframe
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = '';    // 注意该公文在"a.com"域下
        document.body.appendChild(ifrproxy);
    }
}

.com下的域名cs3.html

//因为parent.parent和自己属于同二个域,所以能够转移其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);当然如此做也存在好多欠缺,诸如数码直接揭露在了url中,数据容积和项目都轻易等

...

 

四、flash跨域服务器加多crossdomain.xml

2.)jquery ajax:

 代码如下

 

复制代码

$.ajax({

    url: '',

    type: 'get',

    dataType: 'jsonp',  // 诉求格局为jsonp

    jsonpCallback: "onBack",    // 自定义回调函数名

    data: {}

});

 

<?xml version=”1.0″?>
<cross-domain-policy>
<allow-access-from domain=”*.another.com.cn” />
</cross-domain-policy>

3.)vue.js:

...

 

this.$http.jsonp('', {

    params: {},

    jsonp: 'onBack'

}).then((res) => {

    console.log(res);

})

 

后端node.js代码示例:

 

var querystring = require('querystring');

var http = require('http');

var server = http.createServer();

 

server.on('request', function(req, res) {

    var params = qs.parse(req.url.split('?')[1]);

    var fn = params.callback;

 

    // jsonp再次来到设置

    res.writeHead(200, { 'Content-Type': 'text/javascript' });

    res.write(fn   '('   JSON.stringify(params)   ')');

 

    res.end();

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

 

jsonp短处:只好兑现get一种央求。

 

二、 document.domain iframe跨域

 

此方案仅限主域同样,子域差异的跨域应用场景。

 

达成原理:八个页面都通过js强制设置document.domain为根基主域,就兑现了同域。

 

1.)父窗口:()

 

<iframe id="iframe" src=";

<script>

    document.domain = 'domain.com';

    var user = 'admin';

</script>

 

2.)子窗口:()

 

<script>

    document.domain = 'domain.com';

    // 获取父窗口中变量

    alert('get js data from parent ---> '   window.parent.user);

</script>

 

三、 location.hash iframe跨域

 

贯彻原理: a欲与b跨域相互通讯,通过中间页c来落到实处。 三个页面,区别域之间利用iframe的location.hash传值,同样域之间直接js访谈来通讯。

 

切切实实贯彻:A域:a.html -> B域:b.html -> A域:c.html,a与b分化域只好通过hash值单向通讯,b与c也不相同域也只能单向通讯,但c与a同域,所以c可通过parent.parent访问a页面全体目的。

 

1.)a.html:()

 

<iframe id="iframe" src="" style="display:none;"></iframe>

<script>

    var iframe = document.getElementById('iframe');

 

    // 向b.html传hash值

    setTimeout(function() {

        iframe.src = iframe.src   '#user=admin';

    }, 1000);

    

    // 开放给同域c.html的回调方法

    function onCallback(res) {

        alert('data from c.html ---> '   res);

    }

</script>

 

2.)b.html:()

 

<iframe id="iframe" src="" style="display:none;"></iframe>

<script>

    var iframe = document.getElementById('iframe');

 

    // 监听a.html传来的hash值,再传给c.html

    window.onhashchange = function () {

        iframe.src = iframe.src   location.hash;

    };

</script>

 

3.)c.html:()

 

<script>

    // 监听b.html传来的hash值

    window.onhashchange = function () {

        // 再通过操作同域a.html的js回调,将结果传到

        window.parent.parent.onCallback('hello: '   location.hash.replace('#user=', ''));

    };

</script>

 

四、 window.name iframe跨域

 

window.name属性的奇异之处:name值在差别的页面(以致差异域名)加载后依然存在,何况能够支撑极度长的 name 值(2MB)。

 

1.)a.html:()

 

var proxy = function(url, callback) {

    var state = 0;

    var iframe = document.createElement('iframe');

 

    // 加载跨域页面

    iframe.src = url;

 

    // onload事件会触发2次,第1次加载跨域页,并存在数据于window.name

    iframe.onload = function() {

        if (state === 1) {

            // 第2次onload(同域proxy页)成功后,读取同域window.name中数量

            callback(iframe.contentWindow.name);

            destoryFrame();

 

        } else if (state === 0) {

            // 第1次onload(跨域页)成功后,切换成同域代理页面

            iframe.contentWindow.location = '';

            state = 1;

        }

    };

 

    document.body.appendChild(iframe);

 

    // 获取数据今后销毁这一个iframe,释放内部存款和储蓄器;那也确定保证了克拉玛依(不被别的域frame js访谈)

    function destoryFrame() {

        iframe.contentWindow.document.write('');

        iframe.contentWindow.close();

        document.body.removeChild(iframe);

    }

};

 

// 央浼跨域b页面数据

proxy('', function(data){

    alert(data);

});

 

2.)proxy.html:(.

当中代理页,与a.html同域,内容为空就能够。

 

3.)b.html:()

 

<script>

    window.name = 'This is domain2 data!';

</script>

 

小结:通过iframe的src属性由国外转向本地点,跨域数据即由iframe的window.name从异国传递到当地方。那一个就高明地绕过了浏览器的跨域访谈限制,但还要它又是安全操作。

 

五、 postMessage跨域

 

postMessage是HTML5 XMLHttpRequest Level 第22中学的API,且是为数十分的少可以跨域操作的window属性之一,它可用来消除以下方面包车型大巴难点:

a.) 页面和其张开的新窗口的数量传递

b.) 多窗口之间消息传递

c.) 页面与嵌套的iframe消息传递

d.) 上边七个现象的跨域数据传递

 

用法:postMessage(data,origin)方法接受五个参数

data: html5专门的学业协助任意基本项目或可复制的目的,但部分浏览器只扶助字符串,所以传参时最佳用JSON.stringify()系列化。

origin: 协议 主机 端口号,也能够安装为”*”,表示能够传递给自由窗口,固然要钦赐和脚下窗口同源的话设置为”/”。

 

1.)a.html:()

 

<iframe id="iframe" src="" style="display:none;"></iframe>

<script>      

    var iframe = document.getElementById('iframe');

    iframe.onload = function() {

        var data = {

            name: 'aym'

        };

        // 向domain2传送跨域数据

        iframe.contentWindow.postMessage(JSON.stringify(data), '');

    };

 

    // 接受domain2重返数据

    window.addEventListener('message', function(e) {

        alert('data from domain2 ---> '   e.data);

    }, false);

</script>

 

2.)b.html:()

 

<script>

    // 接收domain1的数据

    window.addEventListener('message', function(e) {

        alert('data from domain1 ---> '   e.data);

 

        var data = JSON.parse(e.data);

        if (data) {

            data.number = 16;

 

            // 管理后再发回domain1

            window.parent.postMessage(JSON.stringify(data), '');

        }

    }, false);

</script>

 

六、 跨域能源分享(CO奥迪Q5S)

 

普通跨域央求:只服务端设置Access-Control-Allow-Origin就可以,前端无须设置。

带cookie央求:前后端都亟待设置字段,其他部供给注意:所带cookie为跨域诉求接口所在域的cookie,而非当前页。

眼前,全部浏览器都帮助该意义(IE8 :IE8/9索要利用XDomainRequest对象来援助CO君越S)),COHighlanderS也曾经变为主流的跨域消除方案。

 

1、 前端设置:

 

1.)原生ajax

 

// 前端安装是或不是带cookie

xhr.withCredentials = true;

 

演示代码:

 

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

 

// 前端安装是还是不是带cookie

xhr.withCredentials = true;

 

xhr.open('post', '', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('user=admin');

 

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

};

 

2.)jQuery ajax

 

$.ajax({

    ...

   xhrFields: {

       withCredentials: true    // 前端安装是不是带cookie

   },

   crossDomain: true,   // 会让央浼头中满含跨域的额外新闻,但不会含cookie

    ...

});

 

3.)vue框架

 

在vue-resource封装的ajax组件中投入以下代码:

 

Vue.http.options.credentials = true

 

2、 服务端设置:

 

若后端设置成功,前端浏览器调节台则不会并发跨域报错音信,反之,表明没设成功。

 

1.)Java后台:

 

/*

* 导入包:import javax.servlet.http.HttpServletResponse;

* 接口参数中定义:HttpServletResponse response

*/

response.setHeader("Access-Control-Allow-Origin", "");  // 若有端口需写全(协议 域名 端口)

response.setHeader("Access-Control-Allow-Credentials", "true");

 

2.)Nodejs后台示例:

 

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

 

server.on('request', function(req, res) {

    var postData = '';

 

    // 数据块接收中

    req.addListener('data', function(chunk) {

        postData  = chunk;

    });

 

    // 数据接收达成

    req.addListener('end', function() {

        postData = qs.parse(postData);

 

        // 跨域后台装置

        res.writeHead(200, {

            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie

            'Access-Control-Allow-Origin': '',    // 允许访谈的域(协议 域名 端口)

            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本不能读取cookie

        });

 

        res.write(JSON.stringify(postData));

        res.end();

    });

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

 

七、 nginx代理跨域

 

1、 nginx配置解决iconfont跨域

 

浏览器跨域访谈js、css、img等常规静态财富被同源计策准许,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中到场以下配置。

 

location / {

  add_header Access-Control-Allow-Origin *;

}

 

2、 nginx反向代理接口跨域

 

跨域原理: 同源战略是浏览器的安全战略,不是HTTP协议的一局地。服务器端调用HTTP接口只是选拔HTTP协议,不会执行JS脚本,无需同源计谋,也就荒诞不经赶过难题。

 

福寿绵绵思路:通过nginx配置三个代理服务器(域名与domain1一样,端口差别)做跳板机,反向代理访谈domain2接口,并且能够顺便修改cookie中domain音讯,方便当前域cookie写入,实现跨域登陆。

 

nginx具体布署:

 

#proxy服务器

server {

    listen       81;

    server_name  www.domain1.com;

 

    location / {

        proxy_pass   ;  #反向代理

        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名

        index  index.html index.htm;

 

        # 当用webpack-dev-server等中间件代理接口访谈nignx时,此时无浏览器参与,故未有同源限制,上边包车型客车跨域配置可不启用

        add_header Access-Control-Allow-Origin ;  #此时此刻端只跨域不带cookie时,可为*

        add_header Access-Control-Allow-Credentials true;

    }

}

 

1.)前端代码示例:

 

var xhr = new XMLHttpRequest();

 

// 前端按钮:浏览器是不是读写cookie

xhr.withCredentials = true;

 

// 访问nginx中的代理服务器

xhr.open('get', '', true);

xhr.send();

 

2.) Nodejs后台示例:

 

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

 

server.on('request', function(req, res) {

    var params = qs.parse(req.url.substring(2));

 

    // 向前台写cookie

    res.writeHead(200, {

        'Set-Cookie': 'l=a123456;帕特h=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本不可能读取

    });

 

    res.write(JSON.stringify(params));

    res.end();

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

 

八、 Nodejs中间件代理跨域

 

node中间件完结跨域代理,原理差不多与nginx一样,都以经过启贰个代理服务器,达成数量的倒车。

 

1、 非vue框架的跨域(2次跨域)

 

利用node express http-proxy-middleware搭建二个proxy服务器。

 

1.)前端代码示例:

 

var xhr = new XMLHttpRequest();

 

// 前端开关:浏览器是不是读写cookie

xhr.withCredentials = true;

 

// 访谈http-proxy-middleware代理服务器

xhr.open('get', '', true);

xhr.send();

 

2.)中间件服务器:

 

var express = require('express');

var proxy = require('http-proxy-middleware');

var app = express();

 

app.use('/', proxy({

    // 代理跨域指标接口

    target: '',

    changeOrigin: true,

 

    // 修改响应头音信,实现跨域并允许带cookie

    onProxyRes: function(proxyRes, req, res) {

        res.header('Access-Control-Allow-Origin', '');

        res.header('Access-Control-Allow-Credentials', 'true');

    },

 

    // 修改响应音讯中的cookie域名

    cookieDomainRewrite: 'www.domain1.com'  // 可认为false,表示不退换

}));

 

app.listen(3000);

console.log('Proxy server is listen at port 3000...');

 

3.)Nodejs后台同(六:nginx)

 

2、 vue框架的跨域(1次跨域)

 

应用node webpack webpack-dev-server代理接口跨域。在付出遭遇下,由于vue渲染服务和接口代理服务都是webpack-dev-server同二个,所以页面与代理接口之间不再跨域,无须设置headers跨域音讯了。

 

webpack.config.js部分配置:

 

module.exports = {

    entry: {},

    module: {},

    ...

    devServer: {

        historyApiFallback: true,

        proxy: [{

            context: '/login',

            target: '',  // 代理跨域目的接口

            changeOrigin: true,

            cookieDomainRewrite: 'www.domain1.com'  // 可感觉false,表示不修改

        }],

        noInfo: true

    }

}

 

九、 WebSocket协商跨域

 

WebSocket protocol是HTML5一种新的商业事务。它达成了浏览器与服务器全双工通讯,同时允许跨域通信,是server push技巧的一种很好的落到实处。

原生WebSocket API使用起来不太有利,我们使用Socket.io,它很好地卷入了webSocket接口,提供了更简约、灵活的接口,也对不帮衬webSocket的浏览器提供了向下包容。

 

1.)前端代码:

 

<div>user input:<input type="text"></div>

<script src="./socket.io.js"></script>

<script>

var socket = io('');

 

// 连接成功拍卖

socket.on('connect', function() {

    // 监听服务端新闻

    socket.on('message', function(msg) {

        console.log('data from server: ---> '   msg);

    });

 

    // 监听服务端关闭

    socket.on('disconnect', function() {

        console.log('Server socket has closed.');

    });

});

 

document.getElementsByTagName('input')[0].onblur = function() {

    socket.send(this.value);

};

</script>

 

2.)Nodejs socket后台:

 

var http = require('http');

var socket = require('socket.io');

 

// 启http服务

var server = http.createServer(function(req, res) {

    res.writeHead(200, {

        'Content-type': 'text/html'

    });

    res.end();

});

 

server.listen('8080');

console.log('Server is running at port 8080...');

 

// 监听socket连接

socket.listen(server).on('connection', function(client) {

    // 接收音信

    client.on('message', function(msg) {

        client.send('hello:'   msg);

        console.log('data from client: ---> '   msg);

    });

 

    // 断开管理

    client.on('disconnect', function() {

        console.log('Client socket has closed.');

    });

});

 

转自:

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:之间相互传值程序代码,

关键词: