javascript权威指南第16章 HTML5脚本编程
<!DOCTYPE html>
<html> <head>
<script type="text/javascript" src="HTML5Script.js"></script>
<script type="text/javascript" src="EventUtilExt.js"></script>
</head> <body>
<iframe src="htt://www.wrox.com" id="myframe" width="400" height="300"></iframe>
<div aria-busy="true" style="width:600px;height:300px;background-color:honeydew;" draggable="true">
<img src="timg.gif" id="droptarget" draggable="true">
</div>
<div>
<video src="conference.mpg" id="myVideo">Video player not available.</video>
<!-- 嵌入视频 -->
<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 player not available.
</video>
<!-- 嵌入音频 -->
<video >
<source src="song.ogg" type="audio/ogg" >
<source src="song.mp3" type="audio/mpeg" >
Video player not available.
</video> </div>
<script type="text/javascript"> EventUtilExt.addHandler(window, 'message', function (event) {
//确保发送消息的域是已知域
if (event.origin == 'http://www.wrox.com') {
//处理接收到的数据
processMessage(event.data);
//可选：向来源窗口发送回执
event.source.postMessage('Received', 'http://p2p.wrox.com');
}
}); var iframewindow = document.getElementById("myframe").contentWindow; iframewindow.postMessage("A secret", "http://www.wrox.com"); </script>
</body> </html>
//第16章 HTML5脚本编程
//16.1 跨文档消息传递 //HTML5Scrip.html //16.2 原生拖放
//16.2.1 拖放事件 拖动过程触发的事件
//dragstart
//drag
//dragend //当某个元素被拖动到一个有效的放置目标上时，下列事件会依次发生
//dragenter
//dragover
//dragleave or drop //16.2.2 自定义放置目标
//添加监听事件，禁止事件冒泡传播触发原生事件
var droptarget =document.getElementById('droptarget'); EventUtilExt.addHandler(droptarget,'dragover',function(event){
EventUtilExt.preventDefault(event);
}); EventUtilExt.addHandler(droptarget,'dragenter',function(event){
EventUtilExt.preventDefault(event);
}); EventUtilExt.addHandler(droptarget,'drop',function(event){
EventUtilExt.preventDefault(event);
}); //16.2.3 dataTransfer 对象
// dataTransfer对象有两个主要方法 getData() 和 setData()
// 该对象只有在拖放事件中访问 如下示例
// var dataTransfer = event.dataTransfer;
// dataTransfer.setData('url','http://www.wrox.com');
// dataTransfer.getData('url'); //16.2.4 dropEffect 与 effectAllowed
//利用dataTransfer对象，还可以接收 dropEffect 和 effectAllowed 属性
// dropEffect 属性值枚举
//none 不能把拖动的元素放在这里，这是除文本框之外所有的元素的默认值
//move 应该把拖动的元素移动到放置目标
//copy 应该把拖动的元素复制放放置目标
//link 应该放置目标会打开拖动的元素 //dropEffect属性只有搭配effectAllowed 属性才有用。effectAllowed属性表示
//允许拖动元素那种dropEffect. effectAllowed的值枚举
//unitnitialized 没有给被拖动的元素设置任何放置行为
//none 被拖动的元素不能有任何行为
//copy 只允许值为copy 的dropEffect
//link 只允许值为link 的dropEffect
//move 只允许值为move 的dropEffect
//copyLink 只允许值为copy和link 的dropEffect
//copyMove 只允许值为copy和move 的dropEffect
//linkMove 只允许值为link和move 的dropEffect
//all 允许任意dropEffect
//必须在ondragstrart事件处理程序设置effectAllowed属性 //16.2.5 可拖动
// <img src="timg.gif" id="droptarget" draggable="true"> //16.2.6 其他成员
/*
HTML5规范规定dataTransfer 对象还包含下列方法和属性。 addElement(element) 为拖动元素添加一个元素。添加这个元素只影响数据（即增加作为拖动源而响应回调对象），
不会影响拖动操作时页面元素的外观。 clearData(format) 清除以特定格式保存的数据 setDragImage(element,x,y) 指定一幅图像，当拖动时发生，显示在光标下方 types 当前保存的数据类型 */ /*
16.3 媒体元素 忽略，应用中比较少 */
javascript权威指南第16章 HTML5脚本编程的更多相关文章
- javascript权威指南第11章 DOM扩展
//javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...
- 【笔记】javascript权威指南-第六章-对象
对象 //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...
- 【笔记】javascript权威指南-第三章-类型，值和变量
javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.27 计算机程序运行时需要对值(value ...
- javascript权威指南第14章 表单脚本示例代码
HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...
- JavaScript权威指南--第3章 类型、值和变量
在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...
- javascript权威指南第22章高级技巧
HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...
- javascript权威指南第13章 事件示例代码
html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...
- 《JavaScript高级程序设计》笔记：HTML5脚本编程（16）
跨文档消息传递 跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息.例如,www.wrox.com域中的页面与位于一个内嵌框架中 ...
- JavaScript权威指南第02章 词法结构
词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...
随机推荐
- Ribbon【自定义客户端】
Ribbon的加载策略是懒加载,即第一次请求的时候才加载对应上下文,正是这个原因,很多时候第一次调用显得很慢,甚至会超时,所以,可以通过指定ribbon具体服务名称来开启饿加载,即在工程启动的时候,加 ...
- 基于UDP的编程
前提:基于Linux系统的学习 服务器端编程模型1 socket(2) 创建通讯端点,返回一个文件描述符fd2 bind(2) 将fd绑定到本地的地址和端口while(1){ 阻塞等待客户端请求数据的 ...
- 在被调用函数中获取资源及C++中的引用
#include <iostream> using namespace std; struct Teacher{ char name[64]; int age; }; //在被调用函数 获 ...
- "一起来捉妖"怎么从瘸腿中组合到最合心意的妖灵
背景: 最近两天活动,黑鬼白鬼合体觉醒秋容,陆无名,聂小倩,作为一个非土豪玩家,没有超高资质妖灵的我,想要在瘸腿妖灵中选取两个最佳选择,合体觉醒. 初选: 备选妖灵从5个维度录入数据,进行选择,分别为 ...
- 如何升级centos7 内核方法
关于内核说明: 版本性质:主分支ml(mainline),稳定版(stable),长期维护lt(longterm) 版本命名格式:“A.B.C" A代表内核版本号 B代表内核主版本号 C代表 ...
- python绘图之turtle库函数的用法
Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...
- 基于【 责任链模式】二 || 网关zuul过滤器封装
一.基于责任链模式封装网关拦截 上一篇文章中已经使用建造者模式对网关拦截进行封装,存在一个问题,在连接器build中,每一个拦截都要进行true判断,代码看起来冗余,下面使用责任链模式封装 1.基于责 ...
- JavaScript内置一些方法的实现原理--Object.freeze()、instanceof
const定义的常量,一般是不能修改的. 比如: const TIME_OUT = 10000; 但是当值为引用类型值时,还是可以操作对象,扩展或修改对象属性.方法等等. 以下演示代码的操作是不会报错 ...
- rsync 进行本地拷贝
带杠还是不带杠 带杠表示拷贝目录里面的内容不包括目录本身 重要的是源路径带不带杠,目标路径没关系 rsync -az /root/test/src/ /root/test/dest/ rsync -a ...
- dao 接口定义了一个方法，报错 The method xxx is undefined for the type xxx;
转自:https://blog.csdn.net/panshoujia/article/details/78203837 持久层(DAO层)下的一个接口 ,eclipse报了一个The method ...