真实赌钱游戏平台网站:深远理解,开采者要求

2019-11-15 09:49栏目:真实赌钱游戏网站
TAG:

HTML5 开采者供给了然的本领和工具汇总

2011/10/16 · HTML5 · HTML5

注:本文转发自iteye

HTML5现行反革命早已改为了Web开垦中的热点话题,大多数今世浏览器(Safari、Chrome,Firefox,IE10和移动器材卡塔尔都援助HTML5。尽管HTML5的专门的学业还尚无制定达成,但众多开垦者现已将其视作Web开垦品种中的首要技能。一些网址巨头,如谷歌、推特(TWTR.US)、推特和YouTube等,都创设在HTML5功底上。

HTML5中最令人兴奋的功力实在画布(canvas卡塔 尔(英语:State of Qatar)和强硬的表单成效,画布功用已经得以在半数以上浏览器中完美体验(除了IE卡塔尔国,但对于新表单成分的支撑还不是太好。对Web开采者来讲,是时候早先HTML5成本了。

要拓宽HTML5付出,本文中的一些技巧、工具得以让您缩小学习的时光,提升开采的频率。

黄金年代、HTML5支撑测验列表

在最早在此之前,你供给精通今世的浏览器以致活动平台对于HTML5的匡助景况。

  • 主流浏览器HTML5功用支撑一览
  • 一举手一投足平台HTML5支撑一览
  • HTML5支撑测量检验
  • HTML5演示

二、让HTML5成分可用

老版本的IE浏览器不能够分辨新的HTML成分。可是,能够选择一些JavaScript或CSS施工方案来弥补那个毛病。

  • HTML5Shiv:此脚本能够使IE浏览器度和胆识别HTML5元素。
  • HTML5 Enabler:功能与HTML5Shiv类似。
  • Modernizr:它使得开垦者能够在支撑HTML5和CSS3的浏览器中丰硕利用HTML5和CSS3的表征开展付出,同一时候又不会牺牲别的不辅助那么些新技术的浏览器的调整。
  • HTML5 Reset:它提供了生机勃勃组HTML、CSS文件,让您可以看到以起码的时辰来运营三个新的体系。它选择modernizr来支撑HTML5 和 CSS3。

三、浏览器插件

上边是部分JavaScript插件,能够弥补一些浏览器对HTML5的支撑难点。

  1. VideoJS

VideoJS是三个HTML5的摄像播放器,能够在具有浏览器中运用,饱含IE6和移动设备。对于不扶助HTML5的浏览器则自动使用Flash播放器来播音。

真实赌钱游戏平台网站 1

  2. AudioJS

HTML音频播放器。用来让HTML5 的 <  audio> 标签能够在各样浏览器上接受,蕴含运动道具。

真实赌钱游戏平台网站 2

  3. HTML5Widget

HTML5的表单模块,蕴含日历,调色板,滑动零器件,客商端验证等。

真实赌钱游戏平台网站 3

  4. Webforms2

HTML5 表单属性的支撑,举例pattern、required和autofocus。

真实赌钱游戏平台网站 4

  5. LimeJS

LimeJS是HTML5的游玩框架,用于为现代触摸设备和桌面浏览器成立快速、本地化的游乐。

真实赌钱游戏平台网站 5

  6. FlexieJS

辅助CSS3弹性盒子模型(Flexible Box Model卡塔 尔(英语:State of Qatar)。

真实赌钱游戏平台网站 6

四、在线工具

别的,还应该有意气风发部分在线工具,可以支持开拓者加快HTML5档案的次序的开垦。

1. HTML5 Boilerplate

HTML5Boilerplate 是二个HTML / CSS /JS模板,是落到实处跨浏览器符合规律化、品质优化、稳固的可选功效如跨域Ajax和Flash的精品实施。开辟者称之为技艺会集,目标是满意你付出一个跨浏览器,而且面向以往的网址的要求。

真实赌钱游戏平台网站 7

  2. Switch to HTML5

丰盛有效的在线工具,能够依照你的喜好生成HTML5文书档案结构。

真实赌钱游戏平台网站 8

  3. Initializr

Initializr是叁个HTML5模板生成器,以帮忙您起头HTML5类其余开荒。它确立在HTML5 Boilerplate之上。

真实赌钱游戏平台网站 9

  4. HTML5 Visual 速查表

真实赌钱游戏平台网站 10

  5. HTML5 Canvas 速查表

真实赌钱游戏平台网站 11

  6. HTML5 笔记

真实赌钱游戏平台网站 12

  五、其他

您可以经过上边的链接来跟踪HTML5的改革。

HTML5追踪

您能够经过上边包车型客车链接得到HTML5网址的规划灵感。这几个网址库中含有了大气的选拔HTML5本事的网址。

HTML5Gallery

 

赞 3 收藏 评论

真实赌钱游戏平台网站 13

百度不许转码

经过百度手提式有线电话机张开网页时,百度恐怕会对你的网页进行转码,脱下您的行李装运,往你的随身贴狗皮膏药的广告,为此可在 head 内加多

XHTML

<meta http-equiv="Cache-Control" content="no-siteapp" />

1
<meta http-equiv="Cache-Control" content="no-siteapp" />

连锁链接:SiteApp 转码表明

1.本土存款和储蓄localstorage

积累方式:

以键值对(Key-Value)的不二法门存款和储蓄,永恒存款和储蓄,永不失效,除非手动删除。

大小:

各样域名5M

帮衬意况:

真实赌钱游戏平台网站 14

只顾:IE9 localStorage不辅助当和姑件,需求将项目署到服务器,才得以支撑!

检查测量试验方法:

JavaScript

if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }

1
2
3
4
5
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}

常用的API:

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//消弭记录

真实赌钱游戏平台网站 15

存款和储蓄的内容:

数组,图片,json,样式,脚本。。。(只假若能种类化成字符串的剧情都得以积攒卡塔 尔(英语:State of Qatar)

深刻精晓 JSON

2017/03/29 · JavaScript · 2 评论 · JSON

原来的书文出处: Apriltail   

笔者们先来看一个JS中家常便饭的JS对象种类化成JSON字符串的主题材料,请问,以下JS对象通过JSON.stringify后的字符串是怎么着的?先不用急着复制粘贴到调整台,先自身张开多个代码编辑器或许纸,写写看,写完再去细心相比你的调节台出口,假设有误记得看完全文并商量,哈哈。

JavaScript

var friend={ firstName: 'Good', 'lastName': 'Man', 'address': undefined, 'phone': ["1234567",undefined], 'fullName': function(){ return this.firstName + ' ' + this.lastName; } }; JSON.stringify(friend);//这少年老成行重临什么吗?

1
2
3
4
5
6
7
8
9
10
11
var friend={  
    firstName: 'Good',
    'lastName': 'Man',
    'address': undefined,
    'phone': ["1234567",undefined],
    'fullName': function(){
        return this.firstName + ' ' + this.lastName;
    }
};
 
JSON.stringify(friend);//这一行返回什么呢?

第贰个难题,假使自己想在最终JSON字符串将以此’friend’的真名全体制修正成大写字母,也正是把”Good”形成”GOOD”,把”Man”形成”MAN”,那么能够如何做?

根据以上五个难题,大家再蔓引株求问一下,JSON终究是怎样事物?为何JSON正是轻易数据交流?JSON和JS对象的界别?JS中JSON.parseJSON.stringify和不广泛的toJSON,那多少个函数的参数和拍卖细节到底是何许的?

招待步入此番“深挖JSON之旅”,下文将从以下多少个地点去通晓JSON:

  • 首先是对“JSON是生机勃勃种轻量的数据调换格式”的敞亮;
  • 然后来看常常被一概而论的JSON和JS对象的差别;
  • 最终大家再来看JS中那多少个JSON相关函数具体的执行细节。

希望全文能让如早前的自家相符对JSON以管窥天的亲能说清楚JSON是哪些,也能耳熟能详应用JSON,不看调节台就知道JS对象系列化成JSON字符串后输出是什么。

数据交互作用与本地存款和储蓄

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, 如下截图:

真实赌钱游戏平台网站 16

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.attachEvent) { 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中的一个函数。但是那样调用下有个难点本人纠缠了非常久,正是既然在火狐下报那样的不当, 如下图所示:

真实赌钱游戏平台网站 17

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函数卡塔 尔(英语:State of Qatar) 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这种措施值得学习下,如下图所示:

真实赌钱游戏平台网站 18

域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=" +encodeU奥迪Q5IComponent(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) {//通用方法,获取U宝马X5L参数 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服务器与浏览器之间传递。每当同一台计算机通过浏览器诉求某些页面时,就能够发送那些 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是 大器晚成密密层层由支行隔断的名-值对,如上面包车型地铁Taobao的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 allCookies = document.cookie; return decodeU凯雷德IComponent(allCookies); } // 获取钦赐的cookie function getOneCookie(name) { var all库克ies = 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) + '=' + encodeU奥迪Q5IComponent(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 = encodeUHavalIComponent(name) + '=' + encodeU福睿斯IComponent(value); if(expires instanceof Date) { curCookie += ';expires =' + expires.to放线菌壮观素TString(); }else { var date = new Date(); date.set提姆e(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>

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.

浏览器帮助程度如下:

真实赌钱游戏平台网站 19

在乎: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个参数,第五个参数为所发送的音信文本,但也足以是别的javascript对象,第三个参数是接到音信的对象窗口的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.addEventListener("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再次回到内容了。如下:

真实赌钱游戏平台网站 20

咱俩需求掌握如下几条音信:

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

真实赌钱游戏平台网站 21

viewport

viewport 能够让布局在移动浏览器上呈现的越来越好。 常常会写

XHTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 会引致 酷派 5 加多到主屏后以 WebApp 全屏情势打开页面时现身黑边()

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 开首缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是还是不是同意客户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2中新增添属性,能够在页面加载时最小化上下状态栏。那是叁个布尔值,能够间接那样写:
XHTML

&lt;meta name="viewport" content="width=device-width,
initial-scale=1, minimal-ui"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6d4533768552-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6d4533768552-1" class="crayon-line">
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, minimal-ui&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

而风姿洒脱旦你的网站不是响应式的,请不要接受 initial-scale 也许剥夺缩放。

XHTML

<meta name="viewport" content="width=device-width,user-scalable=yes">

1
<meta name="viewport" content="width=device-width,user-scalable=yes">

有关链接:非响应式设计的viewport

适配 黑莓 6 和 HTC 6plus 则须求写:

XHTML

<meta name="viewport" content="width=375"> <meta name="viewport" content="width=414">

1
2
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,三星 6 上却是 375px,大多数 5.5 寸安卓机器(比如说三星(Samsung卡塔尔 Note卡塔 尔(英语:State of Qatar)的 viewport 宽为 400,中兴 6 plus 上是 414px。

2.地面存款和储蓄sessionstorage

HTML5 的当地存款和储蓄 API 中的 localStorage 与 sessionStorage 在动用办法上是平等的,差异在于 sessionStorage 在闭馆页面后即被清空,而 localStorage 则会一贯保留。

四、小结以至关于包容性的主题素材

到那边终于把,JSON和JS中的JSON,梳理了三次,也对内部的内部原因和专心点展开了一次遍历,知道JSON是生龙活虎种语法上衍生于JS语言的风度翩翩种轻量级的数据调换格式,也明白了JSON相对于平日的JS数据结构(非常是目的卡塔 尔(阿拉伯语:قطر‎的出入,更进一层,细心地斟酌了JS中关于JSON管理的3个函数和细节。

不过可惜的是,以上所用的3个函数,不兼容IE7以致IE7早前的浏览器。有关宽容性的座谈,留待现在吧。假使想平昔在利用上消除包容性,那么能够套用JSON官方的js,能够缓和。

如有错误疏失,招待留言提出。

1 赞 10 收藏 2 评论

真实赌钱游戏平台网站 22

SEO 优化部分

  • 页面标题<title>标签(head 尾部必需)
XHTML

&lt;title&gt;your title&lt;/title&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6c0434817344-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6c0434817344-1" class="crayon-line">
 &lt;title&gt;your title&lt;/title&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 页面关键词 keywords
XHTML

&lt;meta name="keywords" content="your keywords"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6c3433502600-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6c3433502600-1" class="crayon-line">
&lt;meta name=&quot;keywords&quot; content=&quot;your keywords&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 页面描述内容 description
XHTML

&lt;meta name="description" content="your description"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6c6270775974-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6c6270775974-1" class="crayon-line">
&lt;meta name=&quot;description&quot; content=&quot;your description&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 概念网页小编 author
XHTML

&lt;meta name="author" content="author,email address"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6ca070525049-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6ca070525049-1" class="crayon-line">
&lt;meta name=&quot;author&quot; content=&quot;author,email address&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 概念网页寻找引擎索引方式,robotterms 是风流倜傥组利用土耳其共和国(The Republic of Turkey卡塔尔语逗号「,」分割的值,平时常好似下二种取值:none,noindex,nofollow,all,index和follow。
XHTML

&lt;meta name="robots" content="index,follow"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6cd878224069-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6cd878224069-1" class="crayon-line">
 &lt;meta name=&quot;robots&quot; content=&quot;index,follow&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

连带链接:WEB1038 – 标志富含无效的值.aspx)

5.IndexedDB

目录数据库 (IndexedDB) API(作为 HTML5 的生机勃勃局部卡塔尔对创设具有足够本地存储数据的数目密集型的离线 HTML5 Web 应用程序很有用。同一时间它还推动当地缓存数据,使观念意识在线 Web 应用程序(例如移动 Web 应用程序卡塔尔能够越来越快地运转和响应。

异步API:

在IndexedDB大部分操作并非我们常用的调用方法,重回结果的情势,而是伸手——响应的形式,比方张开数据库的操作

真实赌钱游戏平台网站 23

这样,大家开发数据库的时候,实质上回来了一个DB对象,而这些目的就在result中。由上海体育场合能够阅览,除了result之外。还应该有多少个首要的性质就是onerror、onsuccess、onupgradeneeded(大家呼吁张开的数据库的版本号和早就存在的数据库版本号不同一时候调用卡塔尔。那就临近于大家的ajax诉求那样。我们倡议了那几个诉求之后并不能够明确它如几时候才诉求成功,所以供给在回调中管理部分逻辑。

闭馆与删除:

JavaScript

function closeDB(db){ db.close(); } function deleteDB(name){ indexedDB.deleteDatabase(name); }

1
2
3
4
5
6
function closeDB(db){
     db.close();
}
function deleteDB(name){
     indexedDB.deleteDatabase(name);
}

数据存款和储蓄:

indexedDB中从未表的定义,而是objectStore,叁个数据库中能够包含八个objectStore,objectStore是二个手疾眼快的数据结构,可以寄放种种类型数据。也正是说一个objectStore也正是一张表,里面积攒的每条数据和三个键相关联。

我们得以应用每条记下中的有个别钦命字段作为键值(keyPath卡塔 尔(阿拉伯语:قطر‎,也可以利用自动生成的星罗棋布数字作为键值(keyGenerator卡塔尔,也得以不点名。选拔键的项目区别,objectStore能够储存的数据结构也许有差距。

那一个就有一点复杂了。看这里的科目:
1. 

2.

详细API地址:

一时就像此,确实有些存储方式未亲身用过,也只可以找些旁人的资料了。先明白个大概,以往用到再详尽记录吧!^_^

1 赞 11 收藏 评论

真实赌钱游戏平台网站 24

1.1 基本采纳——仅需叁个参数

其风姿洒脱大家都会利用,传入三个JSON格式的JS对象恐怕数组,JSON.stringify({"name":"Good Man","age":18})回到三个字符串"{"name":"Good Man","age":18}"

能够看看本身我们传入的那一个JS对象正是顺应JSON格式的,用的双引号,也未尝JSON不收受的属性值,那么生龙活虎旦像早先那三个例子中的相通,how to play?不急,大家先举轻松的例子来证实这几个函数的多少个参数的含义,再来讲那个主题材料。

rss订阅

XHTML

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

1
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

3.离线缓存(application cache卡塔 尔(英语:State of Qatar)

地面缓存应用所需的文书

利用方式:

①配置manifest文件

页面上:

XHTML

<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>

1
2
3
4
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Manifest 文件:

manifest 文件是简约的文书文件,它告诉浏览器被缓存的源委(甚至不缓存的内容卡塔 尔(英语:State of Qatar)。

manifest 文件可分为多少个部分:

CACHE MANIFEST – 在那标题下列出的文书就要第一遍下载后实行缓存

NETWORK – 在这里标题下列出的文书必要与服务器的连年,且不会被缓存

FALLBACK – 在那标题下列出的文书鲜明当页面十分小概访问时的回降页面(例如404 页面卡塔尔国

完整demo:

CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html

1
2
3
4
5
6
7
8
9
10
CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js
NETWORK:
login.jsp
FALLBACK:
/html/ /offline.html

服务器上:manifest文件必要配备不错的MIME-type,即 “text/cache-manifest”。

如Tomcat:

XHTML

<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping>

1
2
3
4
<mime-mapping>
     <extension>manifest</extension>
     <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

常用API:

骨干是applicationCache对象,有个status属性,表示应用缓存的当下意况:

0(UNCACHED卡塔 尔(英语:State of Qatar) :  无缓存, 即未有与页面相关的利用缓存

1(IDLE卡塔尔国 : 闲置,即利用缓存未获得更新

2 (CHECKING卡塔尔国 : 检查中,即正在下载描述文件并检讨更新

3 (DOWNLOADING卡塔尔 : 下载中,即选拔缓存正在下载描述文件中内定的财富

4 (UPDATEREADY卡塔 尔(英语:State of Qatar) : 更新完毕,全数财富都已下载实现

5 (IDLE卡塔 尔(阿拉伯语:قطر‎ :  遗弃,即接收缓存的汇报文件已经不设有了,由此页面无法再探望应用缓存

 

连带的事件:

意味着应用缓存状态的改换:

checking : 在浏览器为运用缓存查找更新时触发

error : 在检查更新或下载财富之间发送错误时接触

noupdate : 在自己评论描述文件开采文件无变化时接触

downloading : 在开端下载应用缓存财富时接触

progress:在文件下载应用缓存的进度中不仅仅不断地下载地接触

updateready : 在页面新的使用缓存下载完成触发

cached : 在选择缓存完整可用时接触

 

Application Cache的两个优势:

① 离线浏览

② 进步页面载入速度

③ 收缩服务器压力

注意事项:

1. 浏览器对缓存数据的体量限定可能不太生机勃勃致(有些浏览器设置的约束是种种站点 5MB卡塔 尔(阿拉伯语:قطر‎
2. 譬喻manifest文件,或然此中列举的某三个文书不能够健康下载,整个更新进程将视为退步,浏览器继续全方位用到老的缓存

  1. 引用manifest的html必需与manifest文件同源,在同三个域下
    4. 浏览器会自动缓存援引manifest文件的HTML文件,那就以致借使改了HTML内容,也急需立异版本技巧完毕纠正。
    5. manifest文件中CACHE则与NETWO索罗德K,FALLBACK的职位顺序未有涉及,假若是隐式注明供给在最前边
  2. FALLBACK中的能源必得和manifest文件同源
    7. 改进完版本后,必得刷新一次才会运行新本子(会现身重刷一回页面包车型大巴情状卡塔尔,须要加上监听版手艺件。
    8. 站点中的别的页面纵然未有安装manifest属性,伏乞的能源借使在缓存中也从缓存中拜候
  3. 当manifest文件产生变动时,财富乞请我也会触发更新

点作者参谋更多材料!

离线缓存与观念浏览器缓存不一样:

  1. 离线缓存是照准任何应用,浏览器缓存是单个文件

  2. 离线缓存断网了也许能够展开页面,浏览器缓存不行

  3. 离线缓存能够主动打招呼浏览器更新财富

1. 七个精气神儿区别的事物怎么那么细心

JSON和JS对象本质上完全不是同一个东西,就好像“斑马线”和“斑马”,“斑马线”基于“斑马”身上的条纹来表现和命名,可是斑马是活的,斑马线是非生物。

相近,”JSON”全名”JavaScript Object Notation”,所以它的格式(语法卡塔尔是依附JS的,但它正是大器晚成种格式,而JS对象是叁个实例,是存在于内部存款和储蓄器的一个事物。

说句玩笑话,借使JSON是依靠PHP的,大概就叫PON了,格局恐怕正是如此的了['propertyOne' => 'foo', 'propertyTwo' => 42,],假使如此,那么JSON可能未来是和PHP相当细致了。

别的,JSON是足以传输的,因为它是文本格式,不过JS对象是不能传输的,在语法上,JSON也会愈加严苛,可是JS对象就很松了。

那便是说多个不等的东西怎么那么精心,因为JSON终究是从JS中演变出来的,语法左近。

版权声明:本文由20个试玩平台发布于真实赌钱游戏网站,转载请注明出处:真实赌钱游戏平台网站:深远理解,开采者要求