<!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. JAVA httpURLConnection curl

    // 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestHttpCurl.java package com.test; import ...

  2. 虚拟环境搭建Django项目

    下载虚拟环境包 pip install virtualenv 创建虚拟环境 virtualenv   env 进入env文件夹 cd env 进入Scripts文件夹 cd Scripts 启动虚拟环 ...

  3. C++打印杨辉三角形

    #include <iostream> #include <iomanip> #include <Windows.h> using namespace std; # ...

  4. WUSTOJ 1307: 校门外的树（Java）

    题目链接:

  5. X64驱动：内核操作进线程/模块

    注意:下面的所有案例必须使用.C结尾的文件,且必须在链接选项中加入 /INTEGRITYCHECK 选项,否则编译根本无法通过(整合修正,Win10可编译,须在测试模式下进行),内核代码相对固定,如果 ...

  6. CF858F Wizard's Tour

    也许更好的阅读体验 \(\mathcal{Description}\) 给定一张 \(n\) 个点 \(m\) 条边的无向图,每条边连接两个顶点,保证无重边自环,不保证连通. 你想在这张图上进行若干次 ...

  7. 【es6】promise

    一.什么是promise?我们用promise解决什么样的问题 promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息:从本意上讲,它是承诺,它承诺 ...

  8. java开发中常用语(词汇)含义

    DAO:Data Access Objects(数据存取对象): DTO:Data Transfer Object: AR:active record:

  9. R_数据操作_高级_04

    数学函数: abs(x) 绝对值     sqrt(x) 平方根   ceiling(x) 放回不小于x的最小整数 floor(x) 不小于x的最大整数   trunc(x) 先0方向截取x的整数部分 ...

  10. 六、eureka客户端自动注册服务

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 上一篇文章,我们稍微了解了一下eureka客户端是如何自动配置的,配置了哪些东西.在自动 ...