新浦京81707con > 功能介绍 > 解决跨域的方案,数据交互与本地存储

原标题:解决跨域的方案,数据交互与本地存储

浏览次数:99 时间:2019-05-02

多少交互与本地存款和储蓄

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

原稿出处: 涂根华   

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

正规词语解释如下:

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

    window对象: 浏览器会在其开采一个HTML文书档案时创设3个应和的window对象。不过,假诺一个文档定义了多少个要么八个框架

(即:包蕴八个大概四个frame或许iframe标签),浏览器就能够为原本文书档案成立多个window对象,再为种种iframe创造额外的window对象,这么些额外的window对象是本来窗口的子窗口。

contentWindow: 是指内定的iframe可能iframe所在的window对象。

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

于今我们得以稳步做demo来分别授课下,假若有iframe父页面为 iframe1.html, 父页面上有一个子页面 分别为iframe二.html 和 iframe三.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>

子页面iframe二.html代码如下:

XHTML

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery壹.七.js"></script> </head> <body> <div id="test">aaa</div> <div class="iframe贰">子页面</div> <script> function b() { console.log("小编是子页面"); } function iframe3Page() { console.log("iframe三页面调用iframe二页面"); } </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>

一.  子页面iframe二.html调用父页面 iframe1.html的因素如下代码:

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

贰.  子页面iframe二.html调用父页面iframe1.html的函数如下代码:

    parent.test2();

在意:父页面iframe壹.html页面 中test二方法无法放在$(function(){}), 放在中间就调用不到。

三. 子页面iframe二.html调用本人的iframe(假设父页面有众多iframe,获取自己iframe不经过id只怕name属性).

    一.率先大家得以在父页面上写多少个函数 用来获取页面全部的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])
          }
      }
  }

    二. 在子页面iframe二.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);

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

老葡京娱乐平台 1

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

一般来讲调用有误的:

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

因为iframe二.html 有不小希望未加载成功,所以要等iframe2加载成功后再实行调用,

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

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attach伊夫nt) { iframe.attach伊夫nt('onload',function(){ callback & callback(); }); }else { iframe.onload = function(){ callback & callback(); } } } // 调用格局如下: // 父页面调用子页面iframe二的艺术 var iframe二 = document.getElementById("iframe二"); iframeIsLoad(iframe2,function(){ iframe2.contentWindow.b(); // 打字与印刷出 我是子页面 // 父页面获取子页面iframe2的成分 var iframeDom = $(".iframe贰",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);
 
});

2:精通JSONP跨域本领的基本原理

Javascript是一种在web开荒中时时使用的前端动态脚本本领,在javascript中,有多少个很首要的新余限制,被称呼”same-Origin-Policy”同源计谋,那壹宗旨对于javascript代码能够访问的页面内容作了很重大的范围,即javascript只好访问与富含它的文书档案在同协议,同域名,同端口的脚本实行互相;

JSONP的基本原理是:利用在页面中创建节点的格局向不一样域提交http请求的情势称为JSONP。

JSONP的实际落成方式如下:

第2我们为了演示跨域,大家在host文件夹下绑定如下三个域名如下:

   127.0.0.1  abc.example1.com

   127.0.0.1  def.example2.com

中间在abc.example一.com域归属有1个a.html页面;访问页面路线如下:

   

一. 大家在域名下abc.example一.com下的a.html页面引进贰个域名字为def.example贰.com下的a.js文件;如下:

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

JavaScript

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

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

聊起底大家在域名下abc.example壹.com下的a.html页面运转下得以见见弹出对话框 “1”;大家能够观察引进差异域名下的js文件也能跨域施行;

2. 假设笔者在域名称为def.example二.com下的a.js文件是不是调用a.html的法门名吧?我们三番8回来演示这么些demo;大家在abc.example一.com下的a.html引进文件如下:

JavaScript

function jsonp(){     alert(1) }

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

里面域名字为def.example二.com下的a.js内容为:jsonp(); 大家承袭来运作下页面,能够见见,依然得以弹出对话框 1;

三.  只要作者在外界的调用方法是还是不是传递三个参数呢?大家三番伍遍和第壹点一样,只是格局里面多了1个参数字传送进去就可以:如下代码:

def.example二.com下的a.js内容为:jsonp(“小编是来测试的”);abc.example一.com下的a.html文件内容为:

JavaScript

 function jsonp(html){        alert(html)   }

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

咱俩运维下页面a.html,也得以看出弹出了对话框 “小编是来测试的”文案;所以,大家就足以经过那种形式来给页面中传播外站的多少;能够兑现JSONP的跨域数据;

驾驭JSONP执行进度如下:

    首先在客户端注册1个callback(比如jsonpcallback),然后把callback名字(比方叫jsonp12345⑥)传给服务器端,服务器端得到callback名字后,必要用jsonp123456(),把将在输出的json内容囊括起来,此时,服务器生成的json数据才干被客户端准确接受;然后以javascript语法的办法,生成2个function,function的名字正是传递回来的参数jsonp12345陆.然后就能够在客户端间接运营调用jsonp12345陆以此函数了;

示范代码如下:

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

动态创制script标签,给script动态设置src值为域名def.example二.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.example二.com域名下的a.js代码如下: jsonp12345陆({"name":'tugenhua','age':'2八','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=jsonp12345陆;服务器端获得jsonpcallback那个参数后;须要用jsonp12345陆(),把将要输出的json内容包蕴起来,此时,服务器生成的json数据技巧被客户摆正确接受;然后以javascript语法的方法,生成三个function,function的名字便是传递回来的参数jsonp123456.然后就能够在客户端直接运转调用jsonp12345陆以此函数了;

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

JSONP的优点:

它不像XMLHttpRequest对象完毕ajax请求受到同源战术的限定,它在全数的浏览器都扶助,

比如古老的IE六也支撑,并且在伸手实现后方可通过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不是个函数 可是本人在子页面明明定义了那样1个函数,那么为啥会报那样的不当呢?经过细致分析及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.attach伊芙nt('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");
};

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

叁. 子页面取父页面成分的值: window.parent.document.getElementById(“topName”).innerHTML等措施。

二: iframe跨域通讯。

iframe跨域访问一般分为二种境况,第三种是同主域,分裂子域的跨域。 第3种是:不相同主域跨域。

1、 是同主域上面,不等子域之间的跨域;能够经过document.domain 来设置同1的主域来缓和。

倘若今后自个儿有个域 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('我是子页');}

就足以跨域调用了 不管是子页面调用父页面 依旧父页面调用子页面。1切ok!

叁:是分歧主域跨域;

尽管google有两种方法有关不相同主域上的跨域难题 有通过location.hash方法只怕window.name方法仍然html伍及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"; //那是请求全经过达成后进行的回调函数,实施最终的动作 克罗丝Request(url, fn, reqdata, callback); //发送请求 } function CrossRequest(url,fn,reqdata,callback) { var server = document.getElementById('serverIf'); server.src = url '?fn=' encodeUEvoqueIComponent(fn) "&data=" encodeUBMWX三IComponent(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” : 二四}’。

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 == 肆 && xmlhttp.status == 200) { var data = xmlhttp.responseText; callback(data); } } xmlhttp.open('POST',url); xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-捌"); 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) {//通用方法,获取U卡宴L参数 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里定义的回调函数。

4:iframe中度自适应的主题材料。

  iframe高度自适应分为二种,壹种是同域下自适应  别的壹种是跨域下自适应,上面大家来探望同域下iframe中度自适应的主题素材。

   1. 同域下iframe中度自适应的主题材料:

     思路:获取被嵌套iframe成分,通过JavaScript获得被嵌套页面最后高度,然后在主页面进行安装来促成。

     如果大家demo有iframe1.html和iframe二.html 下边贴上iframe一.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>

iframe二.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页面包车型客车冲天为iframe二的冲天了。

二. 跨域下iframe中度自适应的标题。

首先我们驾驭iframe跨域大家是无法用下面js形式来调控了,所以大家不得不用个中间键,我们得以在a.com域下iframe壹.html页面嵌套贰个b.com域下的iframe二.html页面,然后自个儿在iframe2.html页面嵌套个和iframe壹.html一样域的iframe三.html页面了,那样的话 iframe一.html和iframe三.html就能够无障碍的进展通讯了,因为页面iframe贰.html嵌套iframe三.html,所以iframe二.html方可改写iframe三.html的href值。

 iframe第11中学的内容:

 iframe一.html内容根本接受iframe三.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>

iframe二.html中的内容:

iframe2.html剧情是怎么把值传给iframe三.html页面,刚才说了是将值传递到iframe3.html页面包车型客车href中,所以如若修改iframe的src就可以,因为不用刷新C页面,所以可以用过hash的主意传递给iframe3.html页面.iframe贰.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>

能够见到 暗中认可景况下 iframe一.html 页面作者给iframe贰.html的惊人是200像素, 可是在iframe二.html本人给iframe三.html中度是230像素,那么符合规律情状下是有滚动条的,那么未来作者是想在iframe贰.html收获滚动条的中度,把高度传给通过iframe3.html的src里面去,然后在iframe三.html页面里获取那几个惊人值 传给iframe一.html(因为iframe壹.html和iframe三.html是同域的),所以iframe壹.html能取到这一个惊人值,再设置下自个儿的冲天正是其1值就ok了。iframe三.html页面包车型客车并世无双功用就是吸收iframe二.html页面通过href传进来的值并且传递给iframe1.html页面,可到iframe2.html页面传来的值能够经过一个定时器不停去查看location.href是 否被更改,可是如此感到成效相当低,还有个方法就是在新的浏览器中通过onhashchange事件 (IE八 ,Chrome伍.0 ,Firefox三.陆 ,Safari5.0 ,Opera拾.陆 )来监听href的退换。

iframe叁.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服务器与浏览器之间传递。每当同壹台计算机通过浏览器请求某些页面时,就能发送这几个 cookie。

 2. cookie的限制?

     一. Cookie的数量大小限制只好为4kb数据,借使数额长度超越四kb数据,超越后的数码将重临空字符串。

     二. Cookie是以文件方式积攒在客户端Computer中,查看和更动cookie很便利,可是安全性方面不佳,由此首要的数码毫无使用cookie来积存。

     三. Cookie是有 限期概念的,如若想要cookie存款和储蓄多久,可以安装cookie的年华,一般的景况下,cookie的生命周期是在游历器关闭的时候失效。

     四. Cookie是有域的定义的,在分歧的域下,cookie无法相互采取,cookie对于那多少个域是实用的,全部向该域发送的请求中都会蕴藏这几个cookie 的音信的,

    那一个值能够包蕴子域(subdomain 如www.zuixiandao.cn) ,也得以不含有它(如.zuixiandao.cn, 对于有所的zuixiandao.cn的兼具子域都灵验). 

    倘若未有明显的钦定,那么那么些域会被认作来自设置cookie的那个域。

     伍. Cookie路线的定义:对于内定域中的那么些路线,应该向服务器发送cookie,比如大家能够钦命cookie唯有从

     陆. Cookie失效时间的定义:表示cookie曾几何时应该被剔除,暗中同意情状下,浏览器会话甘休时将在删除全数的cookie,可是也足以本身设置

 删除时间的。这些值是个GMT格式的日子(Wdy DD-Mon-YYYY HH:MM:SS 金霉素T),用于内定相应删除cookie的纯正时间,因而,

 cookie可在浏览器关闭后如故保存在用户的机械上(同一个浏览器,差别的浏览器无法保存),尽管设置的日期是过期的日子,那么cookie马上删掉。

      柒. Cookie平安标记 钦定后,cookie唯有在采用SSL连接的时候才发送到服务器。比方:cookie音信只可以发送给, 

  而

二: javascript中的cookie

 壹. Javascript中的cookie是 一文山会海由支行隔开的名-值对,如上边包车型客车Tmall的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 在 36四天后超时;

         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 allCookies = 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 = encodeURubiconIComponent(name) '=' encodeU帕JeroIComponent(value); if(expires instanceof Date) { curCookie = ';expires =' expires.to欧霉素TString(); }else { var date = new Date(); date.setTime(date.getTime() 3陆伍*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介绍</h二> <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 -一; } // 增加cookie 限制时间是一年 function addCookie(name,value,expires,path,domain,secure) { var curCookie = encodeU奥迪Q7IComponent(name) '=' encodeU翼虎IComponent(value); if(expires instanceof Date) { curCookie = ';expires =' expires.to丙胺搏来霉素TString(); }else { var date = new Date(); date.setTime(date.getTime() 3陆五*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>

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用户数据;

在IE伍.0中,微软由此1个自定义行为引入了持久化用户数据的定义,用户数量允许每一个文书档案最多12捌kb的数码,每一种域名最多1MB的数码,

要动用持久化数据,首先必须如下所示,使用css在某些成分上内定userData行为:

 

IE用户数量

 

本着IE有如下使用办法:

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

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

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

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

伍. 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",'11111壹'); 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 

Html伍骤增了五个地面存款和储蓄数据,分别是sessionStorage 和 localStorage.

浏览器辅助程度如下:

老葡京娱乐平台 4

留神:IE八 及 以上都补助 web storage。

   sessionStorage: 将数据保存在session对象中,所谓session,指用户浏览有些网址时,从进入网址到浏览器关闭的那段时光,也正是用户浏览那么些网址所消费的时光。

       生命周期:指只在近来的窗口有效,展开多个新的同源窗口,也许说重启浏览器都失效。

       数据大小:能够保存伍MB以致越来越多。

   localStorage: 将数据保存在客户端本地的硬件配备(平时是指硬盘,但也得以是其它硬件设施),纵然浏览器被关门了,该数额照旧存在,下次开采浏览器访问网址时还可以一连应用。可是,数据保存是按分化的浏览器分别打开的,约等于说,假诺展开别的浏览器,是读取不到在那几个浏览器中保存的多少的。

     生命周期:数据间接保留在硬盘中。持久性保存(可是不一致的浏览器保存的多少,是不能够通用的)。

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

    1. cookie 与 sessionStorage 及 localStorage的区别;   

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

    区别:

存款和储蓄大小不1致;cookie存款和储蓄数据最大不得不为4kb,而sessionStorage与localStorage能够保存五MB乃至更繁多据。

  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本地存款和储蓄的值

      四. clear清除全体的key/value

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

          localStorage.clear();  清除全部的多少(firefox除却)

      它将去除全数同源的本地存款和储蓄的localStorage数据

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

      sessionStorage也有上面同样的点子;

下边大家来选拔sessionStorage及 localStorage 来练习下,来做个demo。如下:

HTML代码如下:

XHTML

<h一>web Storage实列</h一> <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如下效果:

请点击查阅:

6:window.name 达成跨域数据传输。

Window.name 中的name值在不相同的页面(乃至不一致的域名)加载后如故存在,并且数据量能够落成二MB。

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

同域下:Name在浏览器景况中是3个大局/window对象的属性,且当在ifrmae中加载页面时,name的属性值依旧维持不改变。

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

 App.html页面代码嵌套1个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文件来绑定3个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页面加载1个与abc.example.com同域下的proxy.html页面, 将该目标页面设置iframe的name属性,因为app.html 与 proxy.html是在同3个域下,所以我们得以获得到。

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

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attach伊芙nt) { 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 === 一) { var data = iframe.contentWindow.name; // 读取数据 alert(data); //弹出111 } else if (state === 0) { state = 一; 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数据已经获得了的话,现在无需的话,大家得以销毁掉,清空等操作。

7:使用HTML5中postMessage 落成ajax中的POST跨域难题

浏览器扶助程度:IE八 ,firefox四 ,chrome8   opera10

     一. 第二,要想接受从任何的窗口发过来的音信,就不能够不对窗口对象的message事件进行监听,如下代码:

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

     2. 次要,供给使用window对象的postMessage方法向别的窗口发送消息,该办法定义如下所示:

         otherWindow.postMessage(message, targetOrigin);

该办法运用二个参数,第叁个参数为所发送的新闻文本,但也得以是任何javascript对象,第1个参数是接受消息的靶子窗口的url地址

(比方:http:1二七.0.0.壹:8080/) , 不过我们也能够在url地址字符串中央银行使通配符”*”, 钦定全体的域下,可是我们照旧提议利用一定的域名下,

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

Demo演示:

     如果未来自身在hosts文件下 ,绑定二 个域名如下:

     127.0.0.1       abc.example.com

     127.0.0.1        longen.example.com

目前借使在abc.example.com域下有1个abc.html页面,在longen.example.com域下有def.html页面,未来自小编是期待那2个分歧域名下的页面

能彼此通讯,abc.html代码如下:

XHTML

<form> <p> <label for="message" style="color:red;font-size:贰4px;">给iframe子窗口发三个消息:</label> <input type="text" name="message" value="send" id="message" /> <input type="submit" value="submit" id="submit"/> </p> </form> <h四>目的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.add伊夫ntListener("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="test二">暂无音讯。</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事件进行监听,能够接过音信。

二. 经过走访message事件的origin属性,能够获得音信的发送源。

叁. 通过走访message事件的data属性,能够赢得音讯内容。

四. 用到postMessage方法发送音信。

5. 透过走访message事件的source属性,可以获得消息发送源的窗口对象(准确的说,应该是窗口的代办对象)。

有了地点的着力知识点,大家得以拉开为兑现ajax POST跨域的难题。

贰. 应用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

复制代码

贯彻思路:通过nginx配置1个代理服务器(域名与domain一一样,端口分裂)做跳板机,反向代理访问domain二接口,并且能够顺便修改cookie中domain音讯,方便当前域cookie写入,完结跨域登陆。

留意callback=?那几个参数必须带上,jquery会自动生成二个函数名更迭那些问号!jQuery.getJSON实际上是用了JSONP格局贯彻。

跨域原理: 同源计谋是浏览器的安全攻略,不是HTTP协议的一有的。服务器端调用HTTP接口只是选取HTTP协议,不会推行JS脚本,不须要同源战略,也就不存在越过问题。

 // 先河化数据,同三个cookie一分钟的访问量都算1回
 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);
    }) 
         } 
     }) 
 }

3.)vue.js:

复制代码

老葡京娱乐平台,3、 location.hash iframe

<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();
})

 

在页面文件中,大家运用JQuery的帮忙:

 

复制代码

 

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

b.) 多窗口之间音讯传递

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

 

演示代码:

三、jQuery.getJSON

 

<?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
         }
 }
 );
 '
?>

 

二、JSONP

 

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

现阶段,全数浏览器都帮忙该作用(IE8 :IE8/玖急需运用XDomainRequest对象来支撑CO福特ExplorerS)),COPRADOS也早就改成主流的跨域消除方案。

 代码如下

 

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

二、 服务端设置:

复制代码

 

复制代码

四、 window.name iframe跨域

PHP页面重临的JSONP格式应该是这么的:

五、 postMessage跨域

 代码如下

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

<script>      

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

    iframe.onload = function() {

        var data = {

            name: 'aym'

        };

        // 向domain②传送跨域数据

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

    };

 

    // 接受domain2再次来到数据

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

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

    }, false);

</script>

 代码如下

node中间件落成跨域代理,原理大概与nginx同样,都以通过启一个代理服务器,落成数量的转化。

一、window.name

 

 代码如下

 

7、 nginx代理跨域

通用方法:

<script>

    // 接收domain1的数据

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

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

 

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

        if (data) {

            data.number = 16;

 

            // 管理后再发回domain一

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

        }

    }, false);

</script>

...

二.)中间件服务器:

function init2(){
 $.ajax({   
  async:false,   
   url: '你的网址/zt/access_count/jsonp.php',  // 跨域URL  
     type: 'GET',   
      dataType: 'jsonp',   
     jsonp: 'jsoncallback', //默认callback  
     data: 'id=十', //请求数据  
      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>

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

而静态HTML发起呼吁的代码可以参见下边:

 

 代码如下

壹.) 财富跳转: A链接、重定向、表单提交

复制代码

 

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

1.) Cookie、LocalStorage 和 IndexDB 不恐怕读取

复制代码

带cookie请求:前后端都亟待设置字段,其它部须要注意:所带cookie为跨域请求接口所在域的cookie,而非当前页。

<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>

location / {

  add_header Access-Control-Allow-Origin *;

}

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

var xhr = new XMLHttpRequest();

 

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

xhr.withCredentials = true;

 

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

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

xhr.send();

首先大家来定义接口的科班,就好像这么:

 

symbol是伸手条件,callback是回调函数名称。

 

 代码如下

七、 nginx代理跨域

一、 服务器再次来到

3.)b.html:()

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

1.)a.html:()

 代码如下

2.)b.html:()

服务器再次回到

 

复制代码

 

复制代码

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

test函数名叫callback参数中定义

3.)c.html:()

 代码如下

$.ajax({

    ...

   xhrFields: {

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

   },

   crossDomain: true,   // 会让请求头中含有跨域的额外音讯,但不会含cookie

    ...

});

2、定义二个iframe,加多onload事件 <iframe id=”iframe一″ onload=”iLoad”><iframe>

 

 

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

 

 代码如下

module.exports = {

    entry: {},

    module: {},

    ...

    devServer: {

        historyApiFallback: true,

        proxy: [{

            context: '/login',

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

            changeOrigin: true,

            cookieDomainRewrite: 'www.domain①.com'  // 可以为false,表示不改造

        }],

        noInfo: true

    }

}

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

JSON是一个轻量级的数据交流格式。JSON对于JavaScript开垦职员充满魅力的案由在于JSON本人就是Javascript中的对象

后端node.js代码示例:

在js中常用的跨域请求包涵有各类,分别为:window.name、JSONP、jQuery.getJSON、flash跨域那种措施,第二种是选用iframe,第一与二种选用的是json数据,最终1种是xml文件操作,上面笔者来简要介绍一下。

<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>

 代码如下

同源战术/SOP(Same origin policy)是1种约定,由Netscape集团19玖5年引进浏览器,它是浏览器最基本也最中央的安全功用,假若不够了同源计策,浏览器很轻巧受到XSS、CSFCRUISER等攻击。所谓同源是指”协议 域名 端口”3者壹致,就算八个差异的域名指向同贰个ip地址,也非同源。

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

 

复制代码

使用node webpack webpack-dev-server代理接口跨域。在开垦条件下,由于vue渲染服务和接口代理服务都以webpack-dev-server同贰个,所以页面与代理接口之间不再跨域,无须设置headers跨域音讯了。

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);
    },
 });
}

 

 

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

data: html5行业内部支持任性基本类型或可复制的靶子,但部分浏览器只帮衬字符串,所以传参时最佳用JSON.stringify()系列化。

二.) DOM 和 Js对象无法获取

 

 

2.)子窗口:()

同源攻略限制之下两种表现:

 

 

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

jsonp缺点:只可以促成get1种请求。

1.)父窗口:()

 

一、 前端设置:

一.)前端代码示例:

 

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...');

2.) Nodejs后台示例:

1.)a.html:()

实际大家普通所说的跨域是狭义的,是由浏览器同源计谋限制的一类请求场景。

 

 

本文由新浦京81707con发布于功能介绍,转载请注明出处:解决跨域的方案,数据交互与本地存储

关键词: 新浦京81707con HTML5

上一篇:移动前端不得不了解的html5

下一篇:没有了