<!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. Python11之列表2（获取、删除列表元素、列表分片、拷贝）

    一.获取列表元素值 列表名 [ 索引值 ] 注:索引值从0开始 nameList = ['詹姆斯','字母哥','乐福','威少','乔治','戴维斯'] nameList[0] '詹姆斯' name ...

  2. 在被调用函数中获取资源及C++中的引用

    #include <iostream> using namespace std; struct Teacher{ char name[64]; int age; }; //在被调用函数 获 ...

  3. 刷新ip地址 windows linux系统

    linux:使用dhcp去更新ip与释放ip 释放ip: dhclient -r eth0 (释放eth0的ip) 更新ip : dhclient eth0 (针对eth0,请求新的ip) windo ...

  4. 在论坛中出现的比较难的sql问题：38(字符拆分 字符串检索问题)

    原文:在论坛中出现的比较难的sql问题:38(字符拆分 字符串检索问题) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得 ...

  5. 起始路由改成分区(Areas)的RouteConfig.cs配置方法

    public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/ ...

  6. 用.net4中的DynamicObject实现简单AOP

    public class DynamicWrapper : DynamicObject { private readonly object source; public DynamicWrapper( ...

  7. putty使用方法

    putty是一种体体积小,无需安装的一款免费安全使用方便的绿色软件,它主要用于远程控制linux系统,只要获取了远程的linux的地址,便可以远程控制linux系统以方便管理,越来越受到各方面的欢迎. ...

  8. div实现圆环进度条

    <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...

  9. java利用反射打印出类的结构

    1 输入一个类名:java.lang.String将打印出String类定义的结构,例如: public final class java.lang.String { public java.lang ...

  10. 如何避免Linux操作系统客户端登陆超时-linux命令之TMOUT=

    工作中经常遇到使用ssh,telnet工具登陆Linux操作系统时,出现的超时问题,怎么处理呢? 添加下面命令: TMOUNT=