摘要:脚本编程跨文档消息传递跨文档消息传送,简称为,指的是来自不同域的页面间传递消息的核心是方法,在规范中,除了部分之外的其他部分也会提到这个方法名,但都是为了同一个目的,向另一个地方传递参数。第一个页面加载时为空
HTML5脚本编程 跨文档消息传递
跨文档消息传送,简称为XMD,指的是来自不同域的页面间传递消息
XMD的核心是postMessage()方法,在HTML5规范中,除了XDM部分之外的其他部分也会提到这个方法名,但都是为了同一个目的,向另一个地方传递参数。对于XDM而言,另个地方指的是包含当前页面中的
postMessage()方法接收两个参数,一条消息和一个表示消息接收方来自哪个域的字符串
//所有支持XDM的浏览器也支持iframe的contentWindow属性 var iframeWindow=document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret","http://www.wwrox.com")
接收到XDM消息时,会触发window对象的message事件,传递给onmessage处理程序的事件对象包含三方面的重要信息
data,作为postMessage()第一个参数 传入的字符串数据
origin,发送消息的文档所在的域
source,发送消息的文档的window对象的dialing,这个代理对象主要用于在发送上一条消息的窗口中调用postMessage()方法,如果发送消息的窗口来自同一个域,那么这个对象就是window
原生拖放 拖放事件拖动元素时,依次触发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); });data Transfer对象
是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为是事件对象的属性,所以只能在拖放事件的处理程序中访问dataTransfer对象
dataTransfer对象有两个主要方法,getData()和setData(),getData()可以取得由setData()保存的值,setData()方法的第一个参数,也是getData()方法唯一的一个参数,是一个字符串,表示保存的数据类型
//设置和接收文本数据 event.dataTransfer.setData("text","some text"); var text=event.dataTrans //设置和接收URL event.dataTransfer.setData("URL","http://www.wrox.com"); var url=event.dataTransfer.getData("URL");dropEffect与effectAllowed
通过dropEffect属性可以知道被拖动元素能够执行哪种放置行为
none,不能把拖动的元素放在这里,这是除文本框之外所有元素的默认值。
move,应该把拖动的元素移动到放置目标
copy,应该把拖动的元素复制到放置目标
link,表示放置目标会打开拖动的元素,但拖动的元素必须是一个链接,有URL
dropEffect属性只有搭配effectAllowed属性才有用,effectAllowed属性表示允许拖动元素的哪种dropEffect,effectAllowed属性可能的值如下
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
可拖动
HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动,图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false
其他成员...
HTML5规范规定dataTransfer对象还应该包含下列方法和属性
addElement,为拖动操作添加一个元素,添加这个元素只影响数据,不会影响拖动操作时页面元素的外观
clearData,清除以特定格式保存的数据
setDragImage,指定一副图像,当拖动发生时,显示在光标下方。这个方法接收的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标
types,当前保存的数据类型,是一个类似数组的集合
媒体元素
不用再标签中指定src属性,而是像下面这样使用一个或多个
属性 事件 自定义媒体播放器
//取得元素的引用 var player = document.getElementById("player"), btn = document.getElementById("video-btn"), curtime = document.getElementById("curtime"), duration = document.getElementById("duration"); //更新播放时间 duration.innerHTML = player.duration; //为按钮添加事件处理程序 EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; } }); //定时更新当前时间 setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250);检测编码器的支持情况
var audio = document.getElementById("audio-player"); //很可能"maybe" if (audio.canPlayType("audio/mpeg")){ //进一步处理 } //可能是"probably" if (audio.canPlayType("audio/ogg; codecs="vorbis"")){ //进一步处理 }历史状态管理
通过 hashchange 事件,可以知道 URL 的参数什么时候发生了变化,即什么时候该有所反应。而通过状态管理 API,能够在不加载新页面的情况下改变浏览器的 URL。为此,需要使用history.pushState() 方法,该方法可以接收三个参数:状态对象、新状态的标题和可选的相对 URL。
history.pushState({name:"Nicholas"}, "Nicholas" page", "nicholas.html"); EventUtil.addHandler(window, "popstate", function(event){ var state = event.state; if (state){ //第一个页面加载时 state 为空 processState(state); } });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97941.html
表单脚本 表单的基础知识 HTMLFormElement有自己独特的属性和方法 acceptCharset,服务器能够处理的字符集,等价于HTML中的accept-charset特性 action,接受请求的URL,等价于HTML中的action特性 elements,表单中所有控件的集合 enctype,请求的编码类型,等价于HTML中的enctype特性 length,表单中控件的数量 m...
摘要:操作类名时可以通过属性添加删除和替换类名。如果将可选的参数设置为,则表示尽量将元素显示在视口中部垂直方向。将元素的内容滚动指定的页面高度,具体高度由元素的高度决定。 DOM扩展 选择符API querySelector()方法 querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null //取得body元素 var b...
摘要:简介简史诞生于年,当时主要负责表单的输入验证。实现一个完整的由三部分组成核心文档对象模型浏览器对象模型就是对实现该标准规定的各个方面内容的语言的描述。把整个页面映射为一个多层节点结构。由万维网联盟规划。主要目标是映射文档的结构。 JavaScript简介 JavaScript简史 JavaScript诞生于1995年,当时主要负责表单的输入验证。 如果没有表单验证的功能,填入信息之...
摘要:能力检测无法精确地检测特定的浏览器和版本。用户代理检测通过检测用户代理字符串来识别浏览器。用户代理检测需要特殊的技巧,特别是要注意会隐瞒其用户代理字符串的情况。 客户端检测 能力检测 能力检测的目的不是识别特定的浏览器,而是识别浏览器的能力,采用这种方式不必顾忌特定的浏览器,只要确定浏览器支持的特定的能力,就能给出解决方案,检测基本模式 if(object.propertyInQu...
摘要:基本概念语法区分大小写,中的一切变量函数名和操作符都区分大小写。要将一个值转换成对应的值,可以调用类型包括整数和浮点数值,基本数值字面量格式是十进制整数,除了十进制外还有八进制十六进制。八进制第一位必须是,十六进制第一位必须是。 基本概念 语法 区分大小写,ECMAScript中的一切(变量、函数名和操作符)都区分大小写。函数名不能使用typeof,因为它是一个关键字,但typeOf...
阅读 3728·2021-09-22 15:49
阅读 3298·2021-09-08 09:35
阅读 1421·2019-08-30 15:55
阅读 2320·2019-08-30 15:44
阅读 712·2019-08-29 16:59
阅读 1597·2019-08-29 16:16
阅读 478·2019-08-28 18:06
阅读 889·2019-08-27 10:55