博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读javascript高级程序设计12-HTML5脚本编程
阅读量:6479 次
发布时间:2019-06-23

本文共 2208 字,大约阅读时间需要 7 分钟。

一、跨文档消息传递(XDM)

1.发送消息

postMessage(msg,domain)用于发送跨文档消息。第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域。第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作。

2.接收消息

接收到消息时,会触发window对象的message事件。传递给onmessage事件处理程序的对象主要包含三个信息:

  • data:对应postMessage()第一个参数传入的内容;
  • origin:发送消息的文档所在域。接收到消息后,检测消息来源是非常重要的步骤。
  • source:发送消息的文档的window对象代理。

实例:

outer.html:

                                                        

inner.html:

                                                  
//接收外层主窗体发送的消息          EventUtil.addHandler(window, 'message', function (event) {            msg.innerHTML = event.data;              });              var submit=document.getElementById("submit");
//向外层主窗体发送消息          EventUtil.addHandler(submit,'click',function(event){               if (parent.postMessage) {              var input = document.getElementById('input').value;              parent.postMessage(input, '*');            } else {              alert('do not support postMessage');            }               });            

二、拖放

1. 拖放事件

被拖动元素会依次触发以下事件:

  • dragstart:按下鼠标键并开始移动时触发;
  • drag:在元素被拖动期间会持续触发该事件;
  • dragend:拖动停止时触发。

当元素拖动到一个目标元素时,会依次触发以下事件:

  • dragenter:元素被拖动到目标元素上时触发。
  • dragover:被拖动的元素在目标元素范围内移动时会持续触发。
  • dragleave或drop:当被拖动元素离开目标元素时触发dragleave。如果元素放到了目标元素中,则触发drop而不在触发dragleave。

虽然大多数元素支持拖放的目标元素事件,但是这些元素默认是不允许放置的。所以要使用preventDefault()取消这些元素的默认事件。

2.dataTransfer对象

dataTransfer对象是事件对象的一个属性,用于从被拖动的元素向目标元素传递字符串类型的数据。保存在dataTransfer对象中的数据只能在ondrop事件中读取。几个常用方法:

  • setData(type,value):设置用来设置数据。第一个参数是“Text”或者“url”,第二个参数是字符串类型的数据。text和url类型还是略有区别的,如果将数据保存为url,那么浏览器会把它当作网页中的链接。如果将其拖放到浏览器窗口中,浏览器就会打开该链接。
  • getData(type):参数type是"Text"或“url”,与set中的设置保持一致。
  • setDragImage(target,x,y):指定一幅图像,当拖动发生时,显示在光标下方。

3.可拖放

默认情况下,图像、文本等是可以拖动的,大多数其他元素不能拖动。如果想让某个元素可拖动,只需设置draggable=true即可。

三、媒体元素

1.音频和视频控件

2.常用属性

autoplay:布尔型,设置是否自动播放。

controls:布尔型,用来设置浏览器中的自带控件是否显示。

currentSrc:当前播放的媒体文件url。

duration:媒体的总播放时间。

currentTime:当前已经播放的秒数。

loop:布尔型,媒体是否自动循环播放。

plaused:媒体播放器是否暂停。

src:媒体文件的来源。

0/
0

3.Audio类型

<audio>元素有对应的构造函数Audio。其实不必将Audio插入到文档中,在创建Audio实例后就开始下载指定文件,下载完成后,调用play()方法就可以开始播放。

转载地址:http://yywuo.baihongyu.com/

你可能感兴趣的文章
Spring连接数据库的几种常用的方式
查看>>
MS CRM 2011 Schedule Report & Email Subscription
查看>>
Linux2.6内核驱动移植参考
查看>>
eclipse打开当前文件所在文件夹
查看>>
去哪儿搜索引擎QSearch设计与实现
查看>>
POJ 2255 Tree Recovery (二叉树)
查看>>
HDU 1026 Ignatius and the Princess I
查看>>
There are two ways for Datatable download as excel
查看>>
TextBox客户端JS赋值 后台获取(转载)
查看>>
PCA误差
查看>>
烦人的数据不一致问题到底怎么解决?——通过“共识”达成数据一致性
查看>>
抽象类详解
查看>>
《Oracle高性能自动化运维》一一2.2 队列锁(Enqueue Lock)
查看>>
《jQuery Mobile入门经典》—— 2.3 使用JavaScript完成功能
查看>>
java.lang.UnsupportedOperationException的解决方法
查看>>
SharePoint 2013 安装配置(3-2)
查看>>
让Erlang服务器后台运行
查看>>
APUE笔记七
查看>>
Ubuntu 下关于crontab的使用详解
查看>>
天兔监控安装
查看>>