javascript高级程序设计学习笔记（七）---HTML5脚本编程

最新推荐文章于 2024-07-20 23:54:17 发布

冬天一起吃雪糕

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量83

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/ningpeixi679/article/details/113184309

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML5脚本编程

跨文档消息传递

跨文档消息传递，指的是在来自不同域的页面间传递消息。
核心是postMessage方法。目的是向另一个地方传递数据，这里的另一个地方指的是包含当前页面的< iframe>元素，或者当前页面弹出的窗口
接收的参数：

一条消息
一个表示消息接收方来自哪个域的字符串

var iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("hello","http://127/.0.0.0.1");

当接收到XDM消息，会触发window的message事件，传递给onmessage处理程序的事件对象包含以下：

data，postMessage的第一个参数传入的字符串数据
origin：发送消息的文档所在的域
source，发送消息的文档的window对象的代理

下面是接收到消息后，验证发送窗口的来源：
source只是window的代理，不能通过它获取window的任何信息。

EventUtil.addHandler(window,"message",function (event) {
    if(event.origin === "http://www.wrox.com"){
        processMessage(event.data);
        event.source.postMessage("Received","http://p2p.wrox.com")
    }
})

原生拖放

拖放事件

拖动某元素时，一次触发：

dragstart，按下鼠标并移动鼠标，会在被拖放的元素触发
drag，触发dragstart后就触发
dragend，拖动停止时，会触发

当一个元素被拖到一个有效的放置目标上：
dragenter，只要元素被拖到放置目标上，就触发
dragover，dragenter之后就触发，而且被拖动的元素还在放置目标范围内移动，会持续触发
dragleave或drop，如果元素被拖出放置目标，就触发，不触发dragover。

自定义放置目标

重写dragenter和dragover

EventUtil.addHandler(droptarget,"dragenter",function (event) {
    EventUtil.preventDefault(event);
});

EventUtil.addHandler(droptarget,"dragover",function (event) {
    EventUtil.preventDefault(event);
});

dataTransfer对象

它是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据。
有两个主要方法:

getData()
setData()

dataTransfer对象可以为每种MIME类型保存一个值。同时在这个对象中保存1一段文本和一个URL。这些数据只能在drop事件处理程序读取。
拖动文本框的文本时，浏览器会调用setData()方法，将拖动的文本以"text"格式保存在dataTransfer中。然后可以通过getData()读取数据。

dropEffect与effectAllowed

通过dropEffect可以知道被拖动的元素能够执行哪种放置行为，四个可能的值：

none，不能放在这里
move，把拖动的元素移动到放置目标
copy，把拖动的元素复制到放置目标
link，表示放置目标会打开拖动的元素

dropEffect要搭配effectAllowed使用，该属性表示允许拖动元素的那种dropEffect：

uninitialized，没有给被拖动元素设置任何放置行为
none，被拖动元素不能有任何行为
copy，只允许copy的dropEffect
link，只允许link的dropEffect
move
copyLink
copyMove
linkMove
all

可拖动

draggable属性表示元素是否可以拖动。

媒体元素

嵌入视频：

<video src="conference.mpg" id="myVideo" >Video player not available.< /video>

浅入音频

<audio src="song.mp3" id="myAudio">Audio player not available.< /audio>

poster属性指定图像的URL可以在加载视频内容期间显示一幅图像
可以在标签中使用多个< source >元素，指定不同的src来源

属性

在这里插入图片描述

事件

在这里插入图片描述

自定义媒体播放器

使用play()和pause()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="mediaplayer">
        <div class="video">
            <video src="movie.mov" id="player" poster="mymovie.jpg" width="300" height="200">
                Video player not available
            </video>
        </div>
    </div>
</body>
<script>
    var player = document.getElementById("player"),
        btn = document.getElementById("video-btn"),
        curtime = document.getElementById("curtime"),
        duration = document.getElementById("duration");

    duration.innerHTML = player.duration;

    EventUtil.addHandler(btn,"click",function(event){
        if(player.paused){
            player.play();
            btn.value = "Pause";
        }else{
            player.paused();
            btn.value = "play";
        }
    });

    setInterval(function(){
        curtime.innerHTML = player.currentTime;
    },250)
</script>
</html>

历史状态管理

通过hashchange事件，可以指定URL的参数发生了声明变化。
非食用history.pushState()方法，该方法接收3个参数：
状态对象
新状态的标题
可选的相对URL
history.pushState({name:“Nicholas”}, ”Nicholas`page", “nicholas.html”);
执行方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对URL。但是，浏览器不会真的向服务器发送请求，即使状态改变之后查询location.href也会返回与地址栏中相同的地址。

冬天一起吃雪糕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript高级程序设计学习笔记（七）---HTML5脚本编程

HTML5脚本编程跨文档消息传递跨文档消息传递，指的是在来自不同域的页面间传递消息。核心是postMessage方法。目的是向另一个地方传递数据，这里的另一个地方指的是包含当前页面的< iframe>元素，或者当前页面弹出的窗口接收的参数：一条消息一个表示消息接收方来自哪个域的字符串var iframeWindow = document.getElementById("myframe").contentWindow;iframeWindow.postMessage("hell
复制链接

扫一扫