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

1.发送消息

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

2.接收消息

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

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

实例:

outer.html:

<body>
<span id="msg"></span>
<input type="text" id="input">
<input type="button" id="submit" value="提交">
<iframe width="300" height="150" src="inner.html" id="frame"></iframe>
<script type="text/javascript" src="EventUtil.js"></script>
<script type="text/javascript">
var btn = document.getElementById('submit');
//向iframe发送消息
EventUtil.addHandler(btn, 'click', function (event) {
var input = document.getElementById('input') .value;
var iframe = document.getElementById('frame') .contentWindow;
if (iframe.postMessage) {
iframe.postMessage(input, '*');
} else {
alert('do not support postMessage');
}
});
//接收iframe发送的消息
EventUtil.addHandler(window,'message',function(event){
var msg = document.getElementById('msg');
msg.innerHTML=event.data;
});
</script>
</body>

inner.html:

<body>
<span id="msg"></span>
<input type="text" id="input">
<input type="button" id="submit" value="提交">
<script type="text/javascript" src="EventUtil.js"></script>
<script type="text/javascript">
var msg = document.getElementById('msg');
          //接收外层主窗体发送的消息
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');
}
});
</script>
</body>

二、拖放

1. 拖放事件

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

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

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

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

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

<img src="http://static.cnblogs.com/images/logo_small.gif" id="img" >
<div id="target" style="margin-right:10px;border:1px solid black; width:100px; height:100px;"></div>
<script type='text/javascript' src="EventUtil.js"></script>
<script type='text/javascript'>
var image = document.getElementById("img");
var handlerImg=function(event){
event=EventUtil.getEvent(event);
console.log(event.type);
}
EventUtil.addHandler(image, "dragstart", handlerImg);
EventUtil.addHandler(image, "drag", handlerImg);
EventUtil.addHandler(image, "dragend", handlerImg);
var handler=function(event){
event=EventUtil.getEvent(event);
event.preventDefault();
console.log(event.type);
}
var target=document.getElementById("target");
EventUtil.addHandler(target,"dragenter",handler);
EventUtil.addHandler(target,"dragover",handler);
EventUtil.addHandler(target,"dragleave",handler);
EventUtil.addHandler(target,"drop",handler);
</script>

2.dataTransfer对象

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

  • setData(type,value):设置用来设置数据。第一个参数是“Text”或者“url”,第二个参数是字符串类型的数据。text和url类型还是略有区别的,如果将数据保存为url,那么浏览器会把它当作网页中的链接。如果将其拖放到浏览器窗口中,浏览器就会打开该链接。
  • getData(type):参数type是"Text"或“url”,与set中的设置保持一致。
  • setDragImage(target,x,y):指定一幅图像,当拖动发生时,显示在光标下方。
<img src="http://static.cnblogs.com/images/logo_small.gif" id="img" >
<div id="target" style="float:left;margin-left:300px;border:1px solid black; width:200px; height:100px;"></div>
<script type='text/javascript' src="EventUtil.js"></script>
<script type='text/javascript'>
var image = document.getElementById('img');
var handlerImg = function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
event.dataTransfer.setData('Text', target.id);
event.dataTransfer.setData('url',target.getAttribute('src'
));
event.dataTransfer.setDragImage(target,10,10);
}
EventUtil.addHandler(image, 'dragstart', handlerImg);
var handler = function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (event.type) {
case 'drop':
event.preventDefault();
var id = event.dataTransfer.getData('Text');
var url=event.dataTransfer.getData('url'
);
target.appendChild(document.getElementById(id));
target.innerHTML+=url;
break;
case 'dragover':
event.preventDefault();
break;
}
}
var target = document.getElementById('target');
EventUtil.addHandler(target, 'dragover', handler);
EventUtil.addHandler(target, 'drop', handler);
</script>

3.可拖放

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

<div id="target" style="border:1px solid black; width:200px; height:100px;" draggable="false"></div>

三、媒体元素

1.音频和视频控件

<audio id="player" src="billyBrowsers.ogg" poster="smile.gif" controls>不支持音频</audio>
<video id="player" src="billyBrowsers.ogg" poster="mymovie.jpg" width="300" height="200">不支持视频</video>

2.常用属性

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

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

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

duration:媒体的总播放时间。

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

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

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

src:媒体文件的来源。

<div class="mediaplayer">
<div class="video">
<audio id="player" src="billyBrowsers.ogg" poster="smile.gif" controls autoplay='true'>不支持音频</audio>
</div>
<div class="controls">
<input type="button" value="Play" id="audio-btn" />
<span id="curtime">0</span>/<span id="duration">0</span>
</div>
</div>
<script>
window.onload = function(){
var player = document.getElementById("player");
var btn = document.getElementById("audio-btn");
var curtime = document.getElementById("curtime");
var duration = document.getElementById("duration");
duration.innerHTML = player.duration;
EventUtil.addHandler(btn, "click", function(event){
if (player.paused){
console.log(player.currentSrc);
player.play();
btn.value = "Pause";
} else {
player.pause();
btn.value = "Play";
}
});
setInterval(function(){
curtime.innerHTML = player.currentTime;
}, 250);
};
</script>

3.Audio类型

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

<script>
window.onload = function(){
var player=new Audio("billyBrowsers.ogg");
EventUtil.addHandler(player,"canplay",function(){
player.play();
})
};
</script>

读javascript高级程序设计12-HTML5脚本编程的更多相关文章

  1. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  2. 读javascript高级程序设计-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  3. 读javascript高级程序设计08-引用类型之Global、Math、String

    一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encod ...

  4. 读javascript高级程序设计10-DOM

    一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headline ...

  5. 读javascript高级程序设计17-在线检测,cookie,子cookie

    一.在线状态检测 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器.html5提供了检测在线状态的方法:navigator.onLine和online/offline ...

  6. 读javascript高级程序设计01-基本概念、数据类型、函数

    一. javascript构成 1.javascript实现由三部分组成: ECMAScript:核心语言功能 DOM:文档对象模型,提供访问和操作网页内容的方法和接口 BOM:浏览器对象模型,提供与 ...

  7. 读javascript高级程序设计14-错误处理与调试

    一  错误类型 ECMA规定了常见的7种错误类型: Error: 基类型.其他常见的错误类型都继承自该类型,一般供开发人员抛出自定义错误. EvalError:该类型会在eval()函数使用异常时被抛 ...

  8. [已读]JavaScript高级程序设计(第3版)

    从去年开始看,因为太长,总是没有办法一口气把它看完,再加上它与第二版大部分一致,读起来兴致会更缺一点. 与第二版相比,它最大的改变就是增加了很多html5的内容,譬如:Object对象的一些新东西,数 ...

  9. 读Javascript高级程序设计第三版第六章面向对象设计--创建对象

    虽然Object构造函数或者对象字面量都可以用来创建单个对象,但是缺点非常明显:使用同一接口创建很多对象,会产生大量重复代码. 工厂模式  1 function CreatePerson(name,a ...

随机推荐

  1. NULLIF()函数使用讲解

    NULLIF()函数接受两个参数.如果它们相等,那么返回空值:否则,返回第一个参数. 等价于下面的表达式: case when expression1=expression2 then null el ...

  2. CEUtils---我在Unity中使用的一些小类库(不断更新中)

    项目地址: http://git.oschina.net/eran/CEUtils

  3. C# UDP 连接通信 简单示例

    Udp.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  4. The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....

    遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误.....,查找的 ...

  5. android开发中scrollview添加自定义view的滑动显示问题

    最近做了一个实战用到自定义view,由于view比屏幕大所以想放到scrollview中,如下程序.发现不显示.于是对scrollview进行了研究. <LinearLayout xmlns:a ...

  6. Groovy学习笔记(一)

    1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...

  7. 公有IP与私有IP

    在 IPv4 里面就只有两种 IP 的类别,分别是: Public IP : 公共 IP ,经由 INTERNIC 所统一规划的 IP,有这种 IP 才可以连上 Internet : Private ...

  8. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数·简明中文手册 总览

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数·简明中文手册 总览 Halcon函数库非常庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核 ...

  9. LoadRunner脚本设计、场景设计和结果分析

    本次笔记主要记录LoadRunner脚本设计.场景设计和结果分析   1. 脚本设计       录制模式            手工模式:插入步骤.手动编写       1.1  脚本增强:     ...

  10. IOS手势UIGestureRecognizer

    UIGestureRecognizer是一个抽象类,定义了所有手势的基本行为,它有6个子类处理具体的手势: 1.UITapGestureRecognizer (任意手指任意次数的点击) // 点击次数 ...