<!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. AX 2009中现有量画面修改

    前端时间开发一个东西,需要在现有量画面增加一个字段 但是发现这个display方法写在任何数据源下面都不行,数据取的不对. 因为InventSum这个表只有所有维度都出来时才会有对应关联的invent ...

  2. Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

    需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些.     其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...

  3. Spring Boot集成Junit测试

    添加依赖: 在测试类上添加注解:

  4. github的pull request是指什么意思？有什么用处（转）

    https://www.cnblogs.com/-walker/p/6093277.html

  5. 如何加入 Skype for Business 会议？

    参加一个线上培训,收到了Skype的参会地址,是这个样子的 然后就是一脸懵逼的不知道怎么参加会议了.找了半天终于在同事的帮助下参加成功. 我的参加方法:在Window上用Skype for Busin ...

  6. Spring Cloud Alibaba学习笔记（7） - Sentinel规则持久化及生产环境使用

    Sentinel 控制台 需要具备下面几个特性: 规则管理及推送,集中管理和推送规则.sentinel-core 提供 API 和扩展接口来接收信息.开发者需要根据自己的环境,选取一个可靠的推送规则方 ...

  7. 第二次用map23333

    度熊所居住的 D 国,是一个完全尊重人权的国度.以至于这个国家的所有人命名自己的名字都非常奇怪.一个人的名字由若干个字符组成,同样的,这些字符的全排列的结果中的每一个字符串,也都是这个人的名字.例如, ...

  8. hdu 2132... 被基本问题考住了。。

    Problem Description We once did a lot of recursional problem . I think some of them is easy for you ...

  9. 淘宝图片指纹匹配功能c#实现

    #region 生成图片及图片比较 public String GetHash(Image SourceImg) { Image image = ReduceSize(SourceImg); Byte ...

  10. 使用Docker发布Asp.Net Core程序到Linux

    CentOS安装Docker 按照docker官方文档来,如果有之前安装过旧版,先卸载旧版,没有的话,可跳过. sudo yum remove docker \ docker-client \ doc ...