<!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. C++语法笔记（上）

    客观事物中任何一个事物都可以看成一个对象,对象是由一组属性和一组行为构成的. c++中,每个对象都是由数据与函数这两部分构成,数据就是对象的属性,函数就是对象的行为. c++中对象的类型称为类,类是一 ...

  2. Python【变量和赋值】

    name = '千变万化' #把“千变万化”赋值给了“name”这个[变量] >>> name = '一'>>> name = '二'>>> pr ...

  3. 跟我一起学docker

    一.认识 1.什么是docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加 ...

  4. Spring Boot学习随记

    由于早年在管理领域耕耘了一段时间,完美错过了Spring的活跃期, 多少对这个经典的技术带有一种遗憾的心态在里面的, 从下面的我的生涯手绘图中大概可以看出来我的经历. 最近由于新介入到了工业数字化领域 ...

  5. 在论坛中出现的比较难的sql问题：10(删除多表中的同一个外键)

    原文:在论坛中出现的比较难的sql问题:10(删除多表中的同一个外键) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有 ...

  6. WebUploader 上传图片回显

    /* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) { $.fn.extend({ uploadImg: func ...

  7. Python之Django

    一.Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,视图V和模版T.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是CM ...

  8. MySQL LAST_INSERT_ID()用法

    last_insert_id()函数是适用于id为自动生成的表 下面是插入表数据时last_insert_id()函数的两种用法: 表结构: 此表使用last_insert_id()函数的字段为par ...

  9. React/虚拟DOM

    在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...

  10. 打印html页面

    // 打印类属性.方法定义 const Print = function (dom, options) { if (!(this instanceof Print)) return new Print ...