<!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脚本编程的更多相关文章

  1. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  2. 【笔记】javascript权威指南-第六章-对象

    对象 //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...

  3. 【笔记】javascript权威指南-第三章-类型，值和变量

    javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.27   计算机程序运行时需要对值(value ...

  4. javascript权威指南第14章 表单脚本示例代码

    HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

  5. JavaScript权威指南--第3章 类型、值和变量

    在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...

  6. javascript权威指南第22章高级技巧

    HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...

  7. javascript权威指南第13章 事件示例代码

    html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...

  8. 《JavaScript高级程序设计》笔记：HTML5脚本编程（16）

    跨文档消息传递 跨文档消息传递(cross-document messaging),有时候简称为XDM,指的是在来自不同域的页面间传递消息.例如,www.wrox.com域中的页面与位于一个内嵌框架中 ...

  9. JavaScript权威指南第02章 词法结构

    词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...

随机推荐

  1. composer 无法配置命令行写入配置文件问题

    composer config repo.packagist composer https://packagist.phpcomposer.com 这条命令无法修改composer.json 添加中国 ...

  2. CentOS7 搭建 Consul 集群

    环境准备: ssh shell工具: 远程连接 三个CentOS示例: 部署集群 配置好各个实例之间的网络访问,以及ssh免密登录. 下载&上传: 1.下载 Consul: Download ...

  3. Linux 进程控制

    分享知乎上看到的一句话,共勉: 学习周期分为学习,思考,实践,校正四个阶段,周期越短,学习效率越高. 前面讲的都是操作系统如何管理进程,接下来,看看用户如何进行进程控制. 1.进程创建 先介绍一下函数 ...

  4. FPS 游戏实现D3D透视

    FPS游戏可以说一直都比较热门,典型的代表有反恐精英,穿越火线,绝地求生等,基本上只要是FPS游戏都会有透视挂的存在,而透视挂还分为很多种类型,常见的有D3D透视,方框透视,还有一些比较高端的显卡透视 ...

  5. Codeforces Round #415 (Div. 1) (CDE)

    1. CF 809C Find a car 大意: 给定一个$1e9\times 1e9$的矩阵$a$, $a_{i,j}$为它正上方和正左方未出现过的最小数, 每个询问求一个矩形内的和. 可以发现$ ...

  6. VMWare打开centos，提示内部错误

    如题,VMWare打开centos,提示内部错误.该原因是因为服务被停止了之后没有将其启动,将其启动就解决了. CMD客户端输入命令 services.msc 将关于VM的服务启动就可以了

  7. IDEA使用技巧--将本地项目和git远程项目关联

    之前开发没有从头儿搭建过新项目,都是从IDEA配置下项目的git地址,pull代码之后进行开发,提交.这次需要将本地新建的项目push到在git上同样是新建的空项目上去(git上的项目只有工程名和re ...

  8. 无法解析的外部符号 ___argc nafxcw.lib(appcore.obj)

    参考 https://blog.csdn.net/wfree/article/details/44171157 MFC的使用: 由"在静态库中使用 MFC" 改成 "在共 ...

  9. ActiveX控件的注册和反注册

    原文转自 https://blog.csdn.net/piaopiaopiaopiaopiao/article/details/41649495 ActiveX控件,需要注册之后才能使用. 注意:注册 ...

  10. 关于MQ的几件小事（五）如何保证消息按顺序执行

    1.为什么要保证顺序 消息队列中的若干消息如果是对同一个数据进行操作,这些操作具有前后的关系,必须要按前后的顺序执行,否则就会造成数据异常.举例: 比如通过mysql binlog进行两个数据库的数据 ...