15章  使用Canvas绘图

16章  HTML5脚本编程

HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作

跨文档消息传递

简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com)

XDM的核心是postMessage()方法,目的是向另一个地方传递信息,“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口

postMessage()方法接收2个参数:一条消息和一个表示消息接收方来自哪个域的字符串,第二个参数对保障安全通信非常重要,防止浏览器把消息发送到不安全的地方

//所有支持XDM的浏览器也支持contentWindow属性(指向iframe所在的window窗口)

var iframeWindow=document.getElementById("myframe").contentWindow;

iframeWindow.postMessage("A secret","http://www.wrox.com");

尝试向内嵌框架发送一条消息,指定框架中的文档来源于http://www.wrox.com,如果来源匹配消息传递,不匹配则什么都不做(可以把第二个参数设置为“*”,不推荐)

接收到XDM消息时,会触发window对象的message事件,传递给onmessage处理程序的事件对象包含3方面信息

data:作为postMessage()第一个参数传入的字符串数据

origin:发送消息的文档所在的域

source:发送消息的文档的window对象的代理,这个代理对象用于在发送上一条消息的窗口中调用postMessage()方法,如果发送消息的窗口来自同一个域,这个对象就是window

onmessage处理程序中检测消息来源可以确保传入的消息来自已知的页面

EventUtil.addHandler(window,"message",function(event){

    //确保发送消息的域是已知的

    if(event.origin="http://www.wrox.com"){

      //处理接收到的数据

      processMessage(event.data);

      //可选:向来源窗口发送回执

      event.source.postMessage("Received!","http://p2p.wrox.com");

    }

  });

event.source多数情况下是window对象的代理,并非实际的对象

postMessage()的第一个参数是作为字符串来实现的,后来拓展成可传入任何数据结构,但一些浏览器并没有做出改动,保险起见可以在要传入的数据调用JSON.stringify(),在onmessage事件处理程序调用JSON.parse()

原生拖放

拖放事件,拖动某元素时,会依次触发下列事件

dragstart(按下鼠标键,并移动鼠标,通过ondragstart处理程序运行JavaScript代码)

drag(在元素被拖动期间持续触发该事件)

dragend(拖动停止,无论有效还是无效)

当某个元素被拖到一个有效的放置目标上时,会依次发生

dragenter(被拖动的元素拖动到目标上,未放下)

dragover(被拖动的元素还在目标的范围内移动时,持续触发该事件)

dragleave或drop(被拖动的元素拖出了放置目标触发dragleave,放到了目标上触发drop)

自定义放置目标

取消dragenter和dragover事件的默认行为,可以将一个无效的放置目标改为有效的放置目标,释放鼠标也会触发drop事件

dataTransfer对象

它是事件对象的一个属性,只能在事件处理程序发生时访问,这个对象有两个方法getData()和setData()

getData()取得setData()保存的数据,setData()的第一个参数是getData()的唯一一个参数,一个表示保存数据类型的字符串,IE取值为“text”或“URL”,HTML5对此加以扩展,允许各种MIME类型

//设置和接收文本数据

event.dataTransfer.setData("text","some text");

var text=event.dataTransfer.getData("text");

dataTransfer对象可以为每种MIME类型都保存一个值,保存在dataTransfer对象的数据只能通过drop事件处理程序中读取

在拖动文本框中的文本时,浏览器会调用setData()方法,在这些元素被拖放到放置目标时,就可以通过getData()读到这些数据

JavaScript高级程序设计58.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  4. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  5. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  6. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  7. JavaScript高级程序设计52.pdf

    表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...

  8. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

  9. JavaScript高级程序设计49.pdf

    HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.prev ...

随机推荐

  1. IE8+等兼容、360调用webkit内核小记

    首先是处理IE8.9等的兼容问题,注意以下几点: 1,尽可能严格要求自己使用w3c推荐的方式编写html/css 2,在html页面顶部添加<!DOCHTML html>,不清楚请查看参考 ...

  2. jquery api 笔记(2) 事件 事件对象

    事件 #1.resize()     缩放窗体:window.resizeTo(width, height); 并不是兼容做法.   #2 .scroll() ->获取滚动条的位置: .scro ...

  3. 解决 nginx 返回数据不完整的方法

    通过PHP请求接口时发现接口的内容输出没有完整的返回整个数据,早上只修改了nginx api_metrics插件里的计算response大小的代码,观察日志发现一条: 2012/08/28 02:13 ...

  4. window.onresize 多次触发的解决方法

    用了window.onresize但是发现每次 onresize 后页面中状态总是不对,下面与大家分享下onresize 事件多次触发的解决方法. 之前做一个扩展,需要在改变窗口大小的时候保证页面显示 ...

  5. notepad++ :正则表达式系统教程

    前言&索引 前言 正则表达式是烦琐的,但是强大的,学会之后的应用会让你除了提高效率外,会给你带来绝对的成就感.只要认真去阅读这些资料,加上应用的时候进行一定的参考,掌握正则表达式不是问题. 索 ...

  6. WIFI破解总结

    寒假回家了,由于家里没有宽带,而周围又有好多WIFI所以尝试了破解人家的WIFI,嘻嘻. 1.准备u盘一个,格式化 2.用制作工具,将cdlinux系统的镜像安装进u盘 3.用u盘启动电脑,进入cdl ...

  7. Web负载均衡的几种方式

    Web负载均衡的几种实现方式 摘要:负载均衡(Load Balance)是集群技术(Cluster)的一种应用.负载均衡可以将工作任务分摊到多个处理单元,从而提高并发处理能力.目前最常见的负载均衡应用 ...

  8. Http 状态码详解

    状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...

  9. BZOJ 1642: [Usaco2007 Nov]Milking Time 挤奶时间

    Description 贝茜是一只非常努力工作的奶牛,她总是专注于提高自己的产量.为了产更多的奶,她预计好了接下来的N (1 ≤ N ≤ 1,000,000)个小时,标记为0..N-1. Farmer ...

  10. Android 获取系统短信内容

    //这里通过内容提供者获取系统短信内容 Uri uri = Uri.parse("content://sms/"); String[] projection = {"_i ...