Javascript学习笔记11 HTML5脚本编程

电玩女神 2022-05-27 00:45 270阅读 0赞

# 跨文档消息传递 #

跨文档消息传递（XDM）是指在来自不同域的页面之间传递消息。例如由当前页面向**当前页面的`<iframe>`元素，或者当前页面弹出的窗口**发送消息  
核心方法是`postMessage()`，接受两个参数，一条字符串消息，以及表示接受方来自于哪个域的字符串，如果对方窗口不是这个域名，信息不会发送出去。此方法的调用对象不是当前页面的窗口对象，而是目标框架的窗口对象

var iframeWindow = document.getElementById("myframe").contentWindow;  //取得目标窗口对象
    iframeWindow.postMessage("hello","http://www.123.com");   //发送消息

在接受窗口可以添加**message事件用于监听**，event对象具有三个属性，data（接受的字符串），origin（来源窗口所在的域），source（来源窗口window对象的代理）

window.addEventListener('message', receiveMessage, false);
    
    function receiveMessage(event){
        if (event.origin == 'http://example.org') {
            //do something
            event.source.postMessage("recived",event.origin);  //向来源窗口发送回执
        }
    }

# 原生拖放 #

## 拖放事件 ##

拖动某元素时，将依次在**被拖动元素上**触发以下事件：

*  dragstart：按下鼠标并开始拖放
 *  drag：鼠标移动过程中，持续触发
 *  dragend：拖动停止，无论是把元素放在有效还是无效目标上都会触发

当某元素被拖动到一个有效目标时，依次会在**放置目标上**触发以下事件：

*  dragenter：有元素被拖动到放置目标上
 *  dragover：被拖动元素在放置目标上移动，持续触发
 *  dragleave或drop：若元素被拖出了放置目标上，则触发前者，若被放到了放置目标上，则触发drop事件

## 自定义放置目标 ##

**重写dragenter和dragover事件**，使某些无效的放置目标变为有效的放置目标

var droptarget = document.getElementById("droptarget");
    
    droptarget.addEventListener("dragenter",function(event){ 
        event.preventDefault();
    },false);
    
    droptarget.addEventListener("dragover",function(event){ 
        event.preventDefault();
    },false);

阻止Firefox的默认拖动行为（打开URL）

droptarget.addEventListener("drop",function(event){ 
        event.preventDefault();
    },false);

## dataTransfer对象 ##

dataTransfer对象是**事件对象的一个属性**，用于从被拖放元素向放置目标传递字符串格式的数据，其具有两个方法：

*  `getData()`：读取数据，接受一个参数，即读取数据的类型（Text、url、text/uri-list），**只能在drop事件处理程序中读取**
 *  `setData()`：设置和接受数据，接受两个参数，保存的数据类型以及一个字符串，在拖动文本时，浏览器会自动地调用该方法，将文本以”text”格式保存。当拖动链接或图像时，将保存URL。当然你可以自己调用该方法

var dataTransfer = event.dataTransfer;
    // 读取url
    var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
    // 读取文本
    var text = dataTransfer.getData("Text");

## dropEffect和effectAllowed ##

dropEffect和effectAllowed是dataTransfer对象的两个属性，用来确定放置目标的元素能够接受什么操作以及被拖动的元素能够执行哪种放置行为  
**dropEffect**具有下列4个可能的值：

*  “none”：不能把拖动元素放在这里，这是除文本框外所有元素的默认值
 *  “move”：应该把拖动元素移动到放置目标
 *  “copy”：应该把拖动元素复制到放置目标
 *  “link”：表示放置目标会打开拖动的元素

要使用dropEffect属性，**必须在`ondragenter`事件处理程序中，针对放置目标来设置**

dropEffect属性要搭配effectAllowed属性才有用，**effectAllowed**属性具有下列可能值：

*  “uninitialized”：没有给拖动元素设置任何放置行为
 *  “none”：被拖动的元素不能有任何行为
 *  “copy”：只允许复制
 *  “link”：只允许打开链接
 *  “move”：只允许移动
 *  “copyLink”：可以复制和打开链接
 *  “copyMove”：可以复制和移动
 *  “linkMove”：可以打开链接和移动
 *  “all”：任意的dropEffect

**必须在`ondragstart`事件处理程序中设置effectAllowed属性，针对被拖动的元素**

根据两者的概念，我们也就可以理解两者的使用规则：

> （1）如果effectAllowed属性是定为none,则不允许拖放该元素。  
> （2）如果dropEffect 属性设定为none,则不允许拖放元素到该目标元素中。  
> （3）如果effectAllowed属性设定为all 或不设定，则dropEffect属性允许被设定为任何值。并且按指定的效果显示。  
> （4）如果effectAllowed属性设定为具体的效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果之必须完全相等，否则不允许将被拖放元素拖放到目标元素中

## 可拖动 ##

设置元素的`draggable`属性，表示元素是否可拖动。图像和链接自动被设置为true，而其他元素都是false

# 媒体元素 #

`<audio>`和`<video>`元素提供了用于实现日常功能的JavaScriptAPI，使用时，**必须包含src属性，指向加载的媒体文件**

<audio src="1.mp3">audio</audio>
    <video src="1.mpg">video</video>

*  为`poster`属性指定图像的URL可以在加载视频期间显示一副图像
 *  如果标签中有`controls`属性，则意味着浏览器应该显示UI控件

可以使用`<source>`元素指定多个不同的媒体源，尽可能地兼容不同的浏览器

**`<audio>`和`<video>`元素具有很多属性和事件**，使用`play()`和`pause()`方法可以**手工控制媒体文件的播放**。使用`canPlayType()`方法**可以检测浏览器是否支持某种格式和编解码器**，该方法接受一个参数，格式/编解码器字符串，例如”audio/mpeg”，返回”probably”、”maybe”或空字符串

`<audio>`元素还有个构造函数Audio，其与Image很相似，但Audio不用像Image那样必须插入文档，只需创建一个新实例，传入媒体文件，在下载完成后调用`play()`方法，即可播放

var audio = new Audio（"sound.mp3"）;
    audio.addEventListener("canplaythrough",function(){ 
        audio.play();
    },false);

# 历史状态管理 #

历史状态管理能够在不加载新页面的情况下，改变浏览器的URL，解决AJAX使用浏览器前进和后退问题  
`history.pushState()`方法，接受三个参数：**状态对象、新状态的标题和可选的相对URL**

history.pushState({ name:"zjw"},"1","zjw.html");

**该方法将新的状态信息加入历史状态栈，而浏览器的地址栏也会变成新的相对URL**，此时”后退”按钮可以使用了，**按下”后退”按钮，会触发window对象的popstate事件**，此时popstate事件的事件对象有一个**state属性**，**该属性就包含着之前传入的状态对象**

window.addEventListener("popstate",function(event){ 
        var state = event.state;
        if (state){    //第一个页面加载时state为空
            //do something
        }
    },false);

而**重写（替换）当前状态**，则是调用`replaceState()`方法，传入的参数与`pushState()`方法前两个参数相同，其不会在历史状态栈中创建新状态

history.replaceState({ name:"wjz"},"2");

具体实例可以看看[https://blog.csdn.net/q1056843325/article/details/60607402][https_blog.csdn.net_q1056843325_article_details_60607402]

[https_blog.csdn.net_q1056843325_article_details_60607402]: https://blog.csdn.net/q1056843325/article/details/60607402