js高级程序设计笔记11--HTML5脚本编程
来源:互联网 发布:vb 创建文件夹 编辑:程序博客网 时间:2024/05/16 07:44
跨文档消息传递
指的是来自不同域的页面间传递消息。
postMessage():2个参数,一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数是保障通信安全。
var iframeWindow = document.getElementById('myframe').contentWindow;iframeWindow.postMessage("a secret","http://www.wrox.com");//向内嵌框架发送一条消息
如果框架中的文档不是来源于指定的域则postMessage()什么也不做。接收到XDM消息时,会触发window对象的message事件。传递给onmessage处理程序的事件对象有3个属性:
1. data:postMessage()的第一个参数,即发送的消息。
2. origin:发送消息的文档所在的域。
3. source:发送消息的文档的window对象的代理。不能通过此对象访问window对象的其他任何信息。
EventUitl.addHandler(window,"message",function(event)){ if(event.origin == "http://www.wrox.com"){ processMessage(event.data); event.source.postMessage("received","http://p2p.wrox.com"); }}
原生拖放
拖放事件
拖动某元素时,将依次触发下列事件:
1. dragstart
2. drag
3. dragend
当某个元素被拖动到一个有效的放置目标上时,下列事件会依次发生:
1. dragenter
2. dragover
3. dragleave或drop
自定义放置目标
可以把任何元素变成有效的放置目标。方法是重写dragenter和dragover事件的默认行为。
EventUitl.addHandler(droptarget,"dragover",function(event)){ EventUtil.preventDefault(event);}EventUitl.addHandler(droptarget,"dragenter",function(event)){ EventUtil.preventDefault(event);}
在Firefox3.5+中,放置事件的默认行为是打开被放到放置目标上的URL。因此如果是把文本拖放到放置目标上,则会导致无效URL错误。因此要取消drop事件的默认行为。阻止它打开URL。
EventUitl.addHandler(droptarget,"drop",function(event)){ EventUtil.preventDefault(event);}
dataTransfer对象
它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。
有两个主要方法:
getData():传入一个参数,表示要保存的数据类型。IE只定义了“text”和”URL“两种有效的数据类型。HTML5则允许各种MIME类型。
setData():2个参数,第一个参数为
event.dataTransfer.setData("text","some text");var text = event.dataTransfer.getData("text");event.dataTransfer.setData("URL","http://www.wrox.com");var url = event.dataTransfer.getData("URL");
在拖动元素时浏览器会自动调用setData()方法把对应的数据保存在dataTransfer对象中,这些元素被放置在目标上时就可以通过getData()方法读到这些数据。
注:Firefox在其第5个版本之前不能正确的将“url”和”text”映射为”text/uri-list”和“text/plain”,但能把”Text”映射为”text/plain”。
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");var text = dataTransfer.getData("Text");
dropEffect与effectAllowed
dataTransfer对象还有两个属性:dropEffect与effectAllowed。
dropEffect可以知道被拖动的元素能够执行哪种放置行为。有以下取值:
“none”:不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”:应该把拖动的元素移动到放置目标。
“copy”:应该把拖动的元素复制到放置目标。
“link”:表示放置目标会打开拖动的元素。
要使用dropEffect属性,必须在ondragenter事件中针对放置目标来设置他。并且它只有搭配effectAllowed属性才有用。
effectAllowed属性表示允许拖动元素的哪种dropEffect。取值:
uninitialized:没有给拖动元素设置任何放置行为。
none:被拖动的元素不能有任何的行为。
copy:只允许值为copy的dropEffect.
link:只允许值为link的dropEffect.
move:只允许值为move的dropEffect.
copyLink:
copyMove:
linkMove:
all:允许任何dropEffect.
必须在ondragstart事件中设置effectAllowed属性。
可拖动
默认情况下,图像,链接和文本都是可以拖动的。文本只有在选中的情况下才可以被拖动。HTML5为所有元素规定了一个draggable属性。设置这个属性可以改变元素的可拖动属性。
//让图像不能被拖动<img src="smile.gif" draggable="false">//让这个元素可以拖动<div draggable="true">...</div>
另外为了让Firefox支持可拖动属性,必须添加一个ondragstart事件处理程序。并在dataTransfer对象总保存一些信息。
dataTransfer还有一个setDragImage(element,x,y)方法:指定一幅图像,当拖动发生时,显示在光标下方。参数分别为:Hmtl元素和光标在图像中的x,y坐标。
媒体元素
HTML5新增了两个标签和
<video src="conference.mpg" id="muvideo">video palyer not available</video><audio src="song.mp3" id="myAudio">audio player not available</audio>
还可以指定widht和height属性指定视频播放器大小。poster属性指定图像的URI可以在加载视频内容期间显示一幅图像。controls属性浏览器会显示UI控件。
并非所有浏览器都支持所有媒体格式。所以可以指定多个不通的媒体来源。
<video id="myvideo"> <source src="conference.webm" type="video/webm;codecs='vp8,vorbis> <source src="conference.ogv" type="video/ogg;codecs='theora,vorbis> <source src="conference.mpg">video palyer not available</video>
属性(自行查阅)
事件 (自行查阅)
自定义媒体播放器
使用和元素的play()和pause()方法,可以手工控制媒体文件的播放。组合使用属性,事件就可以创建自定义的媒体播放器。
<div class="mediaplayer"> <div class="video"> <video id="palyer" src="movie.mov" poster="mymovie.jpg" width="200" height="200"> video player not available </video> </div> <div class="controls"> <input type="button" value="play" id="video-btn"> <span id="curtime">0</span><span id="duration">0</span> </div></div>//js代码var player = document.getElementById("player"), btn = document.getElementById("btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration");//更新播放时间duration.innerHTML = palyer.duration;EventUtil.addHandler(btn,"click",function(event)){ if(player.paused){ player.play(); btn.value = "pause"; }else{ player.pause(); player.value = "play"; }}//定时更新当前时间setInverval(function(){ curtime.innerHTML = player.currentTime;},250);
检测编码器的支持情况
canPlayType():接收一个参数,一种格式/编解码器字符创
if(audio.canPlayType("audio/mpeg"))
历史状态管理
HTML5通过更新history对象为管理历史状态提供了方便。
通过haschange事件,可以知道URL的参数什么时候发生了变化。而通过状态管理API可以在不加载页面的情况下改变浏览器的URL。需要使用history.pushState()方法,该方法可以接受三个参数:状态对象,新状态的标题和可选的相对URL。
history.pushState({name:"Nicholas"},"nichosla page","haha.html");
执行此方法,新的状态信息就会被加入历史状态栈,浏览器地址栏也会变成新的相对URL。但是浏览器并不会真的向服务器发送请求。第二个参数目前还没有浏览器实现。传入空字符串即可。按下后退按钮后就可以触发window对象的popState事件。该对象的一个state属性就是pushState()的第一个参数。
要更新当前状态,可以是使用replaceState(),传入的参数与pushState的前两个参数相同。
- js高级程序设计笔记11--HTML5脚本编程
- JS高级程序设计16-HTML5脚本编程
- HTML5 脚本编程——JavaScript高级程序设计笔记(13)
- js 高级程序设计笔记
- JS高级程序设计-笔记
- Javascript高级程序设计第16章(HTML5脚本编程)--XDM
- js高级程序设计笔记1
- html5高级程序设计(canvas笔记)
- 表单脚本——JavaScript高级程序设计笔记(11)
- JS高级程序设计14-表单脚本
- 【HTML5】HTML5 高级程序设计 学习笔记Froms API
- 【HTML5】HTML5 高级程序设计 学习笔记2 canvas
- javascript高级程序设计笔记--js数据类型
- javascript高级程序设计笔记--js操作符
- JS高级程序设计笔记(一)-数据类型
- 《js高级程序设计》之最佳实践(笔记)
- 笔记:js高级程序设计第四章
- js高级程序设计学习笔记1
- Redis配置参数项说明
- Fiddler工具问题汇总
- [Android新手学习笔记19]-RelativeLayout相对布局
- 数据结构之栈
- 通过图片URL下载图片到本地
- js高级程序设计笔记11--HTML5脚本编程
- 双连通分量(井下矿工,LA 5135)
- ASN1编解码实现方法
- Java--Mac下修改文件目录权限
- Java IO流学习总结六:ByteArrayInputStream、ByteArrayOutputStream
- MVC基础知识整理
- include中 vector 与 vector.h
- 1035. Password 解析
- NumPy简明教程(二、数组3)