HTML5 脚本

1.跨文本消息传递

跨文本消息传递是指来自不同的域之间的页面相互传递消息,他的核心是postMessage()方法,即向另一个地方传递数据。对于psotMessage而言,另一个地方可以是页面中的iframe或者由当前页面弹出的窗口。它接受两个参数,一个消息和一个表示消息接收方来自哪个域,如下代码:

1 var iframeWin = document.getElementById(‘myFrame‘).contentWindow;
2 iframeWin.postMessage(‘some message‘,‘http://www.cy.com‘);

这里尝试着向页面中的框架传输消息,消息的内容为some message ,而且框架的文档必须来自于http://www.cy.com,不然postMessage什么都不会做。第二个参数可以设置为*,这样就可以向任何来源的框架发送消息。

在myFrame中,接受到message后,会激发window的message事件,通过对onmessage处理程序进行设置,就可以操作传递过来的message了,onmessage的事件对象主要包含三个重要信息,分别如下:

        data: 作为postMessage第一个参数传入的字符串数据

        origin: 发送消息的文档所在的域

        source:发送消息的文档的window对象的代理

接受消息后首先应该验证消息来源的准确性,即判断origin是否是安全的,再根据传递过来的消息进行改变页面。

1 window.addEventListener(‘message‘,function(event){
2     if(event.origin == ‘http://www.cy.com‘){
3         console.log(event.data);
4         event.source.postMessage(‘received!‘,‘http://www.cy1.com‘);
5     }
6 },false);

这样,有了跨文档消息传递后,就可以安全的向iframe中传递信息了。

2.原生拖放

HTML5以IE实例为基础制定了拖放的规范,firefox,safari和chrome都实现了拖放的支持。对于拖放这个行为,只要从被拖放元素和防止目标两方面进行考虑

2.1 被拖放元素

    在拖放元素师,被拖放元素会发生一系列事件,这些事件依次发生,触发事件如下:

        dragstart

        drag

        dragend

   在鼠标按住被拖放元素并移动时,触发dragstart事件,在拖放过程中,会不断触发drag事件,这个就像是mouseover一样,在拖动停止时,即放掉按住的左键,就会触发dragend事件。同时,要使元素可以被拖动,要对元素设置一个draggable属性,表示元素是否可以拖动。对其设置为ture,就可以支持拖动了。另外,要使firefox支持可拖动属性,必须添加一个dragstart事件处理,并在dataTransfer对象中保存一些信息。

2.2 放置目标

    当拖动元素到某个有效的放置目标上时,下列事件会依次发生:

         dragenter

         dragover

         dragleave或drop

    只要拖动元素进入放置目标区域时,就会激发dragenter事件,在放置目标内部移动时,就会不断激发dragover,类似mouseover,最后在目标中放下被拖动元素时,激发drop事件,拖动元素离开放置目标时,激发dragleave。

    所有元素都可成为放置目标区域,当时默认设置都是不可放置区域,所以元素拖动时会产生一个不可放置的光标。要想一个区域成为可放置的目标区域,就必须重写dragenter和dragover,示例如下:

 1 var target = document.getElementById(‘target‘);
 2 target.addEventListener(‘dragenter‘,function(event){
 3       console.log(‘enter‘);
 4       event.dataTransfer.dropEffect = ‘move‘;
 5       event.preventDefault();
 6 },false);
 7 target.addEventListener(‘dragover‘,function(event){
 8       console.log(‘over‘);
 9       event.preventDefault();
10 },false);

通过重写,就可以发现光标变成了可放置的形状。

     对于event.preventDefault(),是因为有些浏览器中对于拖放的默认行为时打开放置目标上的URL,即拖放图片时会使页面转向图片。所以通过event.preventDefault()来阻止其发生,所以同时还要取消drop中的默认行为,阻止打开URL。

1 target.addEventListener(‘drop‘,function(event){
2        console.log(‘drop‘);
3        event.preventDefault();
4 },false);

3.媒体元素

     这里指的媒体元素就是video和audio了,通过这两个标签,可以快速的插入要播放的媒体,同时可以用js进行快捷的控制。由于浏览器并不是支持所有的播放格式,所以可以用source标签,让浏览器自主选择可播放的格式。

<video id="myVideo">
        <source src=‘./conference.webm‘ type="video.webm;codecs=‘vp8, vorbis‘">
        <source src=‘conference.mpg‘>
</video>

    video和audio都提供了一系列js接口,并有许多有用的方法,特别是play(),pause(),他们可以快捷的控制video和audio的播放和暂停。

    在js中,有一个原生的构造函数Audio,可以在任何时候播放音频。Audio和Image很相似,但是Audio可以在未插入到dom时就可以播放,只要传入音频文件就可以了。

1 var audio = new Audio(‘http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181‘);
2 audio.addEventListener(‘canplaythrough‘,function(){
3     audio.play();
4 },false);

 4.历史状态管理

     HTML5通过更新history对象为历史状态管理提供了方便,通过history.pushState()方法,可以在不加载新页面的情况下改变浏览器的URL,并将新的状态信息加入历史状态栈。它需要传入三个参数,分别是状态对象,新状态标题和可选的相对URL。

history.pushState({foo:‘bar‘},‘canvas‘,‘canvas.html‘)

同时,要更新当前状态,可以使用replaceState,传入的参数和pushState相同,它可以重写当前状态,而不会新增状态。

 

以下是以上几个例子的综合,最后一个历史状态管理在本地运行时由于无法验证origin,会报错无法运行,要放到某个域下跑才可以

<html>
<head>
    <script type="text/javascript" id="sc">
        window.onload = function(){
            var target = document.getElementById(target);
            target.addEventListener(dragenter,function(event){
                console.log(enter);
                event.dataTransfer.dropEffect = move;
                event.preventDefault();
            },false);
            target.addEventListener(dragover,function(event){
                console.log(over);
                event.preventDefault();
            },false);
            target.addEventListener(dragleave,function(event){
                console.log(dragleave);
            },false);
            target.addEventListener(drop,function(event){
                console.log(drop);
                console.log(event.dataTransfer.getData(text))
                event.preventDefault();
            },false);
            var source = document.getElementById(source);
            source.addEventListener(dragstart,function(event){
                console.log(dragstart);
                event.dataTransfer.setData(text,www.baidu.com);
                event.dataTransfer.effectAllowed = all;
            },false);
            source.addEventListener(dragend,function(event){
                console.log(dragend);
            },false);
            var audio = new Audio(http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181);
            audio.addEventListener(canplaythrough,function(){
                audio.play();
            },false);
        }
        function openWindow(){
            var win = window.open();
            win.document.body.innerHTML = document.body.innerHTML;
            win.document.head.title = a;
            var script = win.document.createElement(script);
            script.type = "text/javascript";
            script.text = "var audio = new Audio(‘http://music.baidu.com/data/music/file?link=http://zhangmenshiting.baidu.com/data2/music/110083207/110076181219600128.mp3?xcode=7bac81081ab4c774f241b9edd617bbdba38a0832de3e1534&song_id=110076181‘);audio.addEventListener(‘canplaythrough‘,function(){audio.play();},false);";
            win.document.head.appendChild(script);
        }
        function hisPush(){
            history.pushState({foo:bar},canvas,canvas.html)
        }
    </script>
</head>
<body>
    <div id="target" style="width:400px;height:400px;border:1px solid red;"></div>
    <div id=‘source‘ style="width:50px;height:50px;background:red;" draggable=true></div>
    <input type="button" value="open new window" onclick="openWindow()"/>
    <input type="button" value="history" onclick="hisPush()"/>
</body>
</html>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。