跨文档消息传递480
来自不同域的页面间传递消息(简称XDM)
//postMessage()方法(向另一个地方传递数据) postMessage()方法接受两个参数,第一个参数是要传递的数据,第二个参数是表示数据接收方来自哪个域的字符串 var iframeWindow=document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret","http://www.wrox.com"); 接收方接收到XDM消息时,会触发接收方window对象的message事件,传给onmessage处理程序的事件对象包含以下三方面的重要信息: data--postMessage()第一个参数; origin--发送消息的文档所在域; source--发送消息的文档的window对象的代理 检测消息来源的模式: EventUtil.addHandler(window,"message",function(evwnt){ //确保发送消息的域是已知的域 if(event.origin=="http://www.wrox.com"){ //处理接受到的数据 processMessage(event.date); //可选:向来源窗口发送回执 event.source.postMessage("Received!","http://p2p.wrox.com"); } });
原生拖放481
拖放事件
//拖拽元素时,依次触发三个事件: dragstart drag dragend //当元素被拖动到一个有效的放置目标上时,依次触发三个事件: dragenter dragover dragleave/drop
自定义放置目标
//将一个元素变为有效的放置目标 var droptarget=document.getElementById("droptarget"); EventUtil.addHandler(droptarget,"dragover",function(event){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"dragenter",function(event){ EventUtil.preventDefault(event); }); EventUtil.addHandler(droptarget,"drop",function(event){ //针对火狐 EventUtil.preventDefault(event); });
dataTransfer对象
dataTransfer对象是拖放事件的属性,所以只能在拖放事件处理程序中访问它 dataTransfer对象有两个主要方法(在drop事件处理程序中):getData()和setData() //设置和接受文本数据 event.dataTransfer.setData("text","some text"); var text=event.dataTransfer.gatData("Text"); //设置和接受URL event.dataTransfer.setData("URL","http://www.wrox.com/"); var text=event.dataTransfer.gatData("url")||event.dataTransfer.gatData("text/uri-list");
dropEffect与effectAllowed
dropEffect与effectAllowed是dataTransfer对象的两个属性 //dropEffect属性(在ondragenter事件处理程序中设置)可以知道被拖动的元素能够执行哪种放置行为: "none"--不能把拖动的元素放在这里(这是除文本框之外所有元素的默认值) "move"--应该把拖动的元素移动到放置目标 "copy"--应该把拖动的元素复制到放置目标 "link"--表示放置目标会打开拖动的元素(拖动的元素必须是一个链接,有URL) //dropEffect属性只有搭配effectAllowed属性才有用,effectAllowed属性(在ondragstart事件处理程序中设置)表示允许拖动元素的哪种dropEffect: "uninitialized"--没有给被拖动的元素设置任何放置行为 "none"--被拖动的元素不能有任何行为 "copy"--只允许“copy”的dropEffect "link"--只允许“link”的dropEffect "move"--只允许“move”的dropEffect "copyLink"--允许“copy”和"link"的dropEffect "copyMove"--允许“copy”和"move"的dropEffect "linkMove"--允许“link”和"move"的dropEffect "all"--允许任意dropEffect
可拖动
//draggable属性 draggable属性表示元素是否可以拖动(默认情况下,图像、链接和文本是可以拖动的) <img src="smile.gif" draggable="false" alt="Smiley face"> //使图像不可拖动 <div draggable="true"></div> //使这个元素可以拖动
其他成员
//dataTransfer对象的其他属性和方法: addElement(element)--为拖动操作添加一个元素(只添加数据,不影响页面); clearData(format)--清楚以特定格式保存的数据; setDragTmage(element,x,y)--指定一副图像(元素),当拖动发生时,显示在光标下方; types--当前保存的数据类型。这是一个类似数组的集合,以"text"这样的字符串形式保存着数据类型;
媒体元素486
有video和audio两种媒体元素
video和audio的属性(487)
video和audio的事件(488)
自定义媒体播放器(488)
检测编解码的支持情况(489)Audio类型
<audio>元素还有一个原生的JS构造函数Audio,可以在任何时候播放音频 var audio=new Audio("sound.mp3"); EventUtil.addHandler(audio,"canplaythrough",function(event){ audio.play(); });
历史状态管理491
解决用户难在不同状态之间切换的问题
当hashchange事件发生的时候,使用history.pushState()方法; history.pushState(状态对象,新状态的标题,可选的相对URL) //新的状态信息加入到历史状态栈,浏览器地址栏也会变成新的相对URL; 点击“后退”按钮,会触发window对象的popstate事件,对应的事件对象有一个state属性,包含着当初以第一个参数传递给pushState()的状态对象 更新当前状态,可以调用replaceState(),传入的参数与pushState()的前两个参数相同,会重写当前状态: history.replaceState({name:"Greg"},"Greg's page");
JS高级程序设计16-HTML5脚本编程
最新推荐文章于 2021-06-19 22:38:51 发布