首页 > 代码库 > 读javascript高级编程12-HTML5脚本编程
读javascript高级编程12-HTML5脚本编程
一、跨文档消息传递(XDM)
1.发送消息
postMessage(msg,domain)用于发送跨文档消息。第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域。第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作。
2.接收消息
接收到消息时,会触发window对象的message事件。传递给onmessage事件处理程序的对象主要包含三个信息:
- data:对应postMessage()第一个参数传入的内容;
- origin:发送消息的文档所在域。接收到消息后,检测消息来源是非常重要的步骤。
- source:发送消息的文档的window对象代理。
实例:
outer.html:
<body> <span id="msg"></span> <input type="text" id="input"> <input type="button" id="submit" value="提交"> <iframe width="300" height="150" src="inner.html" id="frame"></iframe> <script type="text/javascript" src="EventUtil.js"></script> <script type="text/javascript"> var btn = document.getElementById(‘submit‘); //向iframe发送消息 EventUtil.addHandler(btn, ‘click‘, function (event) { var input = document.getElementById(‘input‘) .value; var iframe = document.getElementById(‘frame‘) .contentWindow; if (iframe.postMessage) { iframe.postMessage(input, ‘*‘); } else { alert(‘do not support postMessage‘); } }); //接收iframe发送的消息 EventUtil.addHandler(window,‘message‘,function(event){ var msg = document.getElementById(‘msg‘); msg.innerHTML=event.data; }); </script> </body>
inner.html:
<body> <span id="msg"></span> <input type="text" id="input"> <input type="button" id="submit" value="http://www.mamicode.com/提交"> <script type="text/javascript" src="http://www.mamicode.com/EventUtil.js"></script> <script type="text/javascript"> var msg = document.getElementById(‘msg‘);
//接收外层主窗体发送的消息 EventUtil.addHandler(window, ‘message‘, function (event) { msg.innerHTML = event.data; }); var submit=document.getElementById("submit");
//向外层主窗体发送消息 EventUtil.addHandler(submit,‘click‘,function(event){ if (parent.postMessage) { var input = document.getElementById(‘input‘).value; parent.postMessage(input, ‘*‘); } else { alert(‘do not support postMessage‘); } }); </script> </body>
二、拖放
1. 拖放事件
被拖动元素会依次触发以下事件:
- dragstart:按下鼠标键并开始移动时触发;
- drag:在元素被拖动期间会持续触发该事件;
- dragend:拖动停止时触发。
当元素拖动到一个目标元素时,会依次触发以下事件:
- dragenter:元素被拖动到目标元素上时触发。
- dragover:被拖动的元素在目标元素范围内移动时会持续触发。
- dragleave或drop:当被拖动元素离开目标元素时触发dragleave。如果元素放到了目标元素中,则触发drop而不在触发dragleave。
虽然大多数元素支持拖放的目标元素事件,但是这些元素默认是不允许放置的。所以要使用preventDefault()取消这些元素的默认事件。
<img src="http://static.cnblogs.com/images/logo_small.gif" id="img" ><div id="target" style="margin-right:10px;border:1px solid black; width:100px; height:100px;"></div><script type=‘text/javascript‘ src="http://www.mamicode.com/EventUtil.js"></script><script type=‘text/javascript‘> var image = document.getElementById("img"); var handlerImg=function(event){ event=EventUtil.getEvent(event); console.log(event.type); } EventUtil.addHandler(image, "dragstart", handlerImg); EventUtil.addHandler(image, "drag", handlerImg); EventUtil.addHandler(image, "dragend", handlerImg); var handler=function(event){ event=EventUtil.getEvent(event); event.preventDefault(); console.log(event.type); } var target=document.getElementById("target"); EventUtil.addHandler(target,"dragenter",handler); EventUtil.addHandler(target,"dragover",handler); EventUtil.addHandler(target,"dragleave",handler); EventUtil.addHandler(target,"drop",handler);</script>
2.dataTransfer对象
dataTransfer对象是事件对象的一个属性,用于从被拖动的元素向目标元素传递字符串类型的数据。保存在dataTransfer对象中的数据只能在ondrop事件中读取。几个常用方法:
- setData(type,value):设置用来设置数据。第一个参数是“Text”或者“url”,第二个参数是字符串类型的数据。text和url类型还是略有区别的,如果将数据保存为url,那么浏览器会把它当作网页中的链接。如果将其拖放到浏览器窗口中,浏览器就会打开该链接。
- getData(type):参数type是"Text"或“url”,与set中的设置保持一致。
- setDragImage(target,x,y):指定一幅图像,当拖动发生时,显示在光标下方。
<img src="http://static.cnblogs.com/images/logo_small.gif" id="img" ><div id="target" style="float:left;margin-left:300px;border:1px solid black; width:200px; height:100px;"></div><script type=‘text/javascript‘ src="EventUtil.js"></script><script type=‘text/javascript‘>var image = document.getElementById(‘img‘);var handlerImg = function (event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); event.dataTransfer.setData(‘Text‘, target.id); event.dataTransfer.setData(‘url‘,target.getAttribute(‘src‘)); event.dataTransfer.setDragImage(target,10,10);}EventUtil.addHandler(image, ‘dragstart‘, handlerImg);var handler = function (event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch (event.type) { case ‘drop‘: event.preventDefault(); var id = event.dataTransfer.getData(‘Text‘); var url=event.dataTransfer.getData(‘url‘); target.appendChild(document.getElementById(id)); target.innerHTML+=url; break; case ‘dragover‘: event.preventDefault(); break; }}var target = document.getElementById(‘target‘);EventUtil.addHandler(target, ‘dragover‘, handler);EventUtil.addHandler(target, ‘drop‘, handler);</script>
3.可拖放
默认情况下,图像、文本等是可以拖动的,大多数其他元素不能拖动。如果想让某个元素可拖动,只需设置draggable=true即可。
<div id="target" style="border:1px solid black; width:200px; height:100px;" draggable="false"></div>
三、媒体元素
1.音频和视频控件
<audio id="player" src="billyBrowsers.ogg" poster="smile.gif" controls>不支持音频</audio> <video id="player" src="billyBrowsers.ogg" poster="mymovie.jpg" width="300" height="200">不支持视频</video>
2.常用属性
autoplay:布尔型,设置是否自动播放。
controls:布尔型,用来设置浏览器中的自带控件是否显示。
currentSrc:当前播放的媒体文件url。
duration:媒体的总播放时间。
currentTime:当前已经播放的秒数。
loop:布尔型,媒体是否自动循环播放。
plaused:媒体播放器是否暂停。
src:媒体文件的来源。
<div class="mediaplayer"> <div class="video"> <audio id="player" src="billyBrowsers.ogg" poster="smile.gif" controls autoplay=‘true‘>不支持音频</audio> </div> <div class="controls"> <input type="button" value="Play" id="audio-btn" /> <span id="curtime">0</span>/<span id="duration">0</span> </div> </div> <script> window.onload = function(){ var player = document.getElementById("player"); var btn = document.getElementById("audio-btn"); var curtime = document.getElementById("curtime"); var duration = document.getElementById("duration"); duration.innerHTML = player.duration; EventUtil.addHandler(btn, "click", function(event){ if (player.paused){ console.log(player.currentSrc); player.play(); btn.value = "Pause"; } else { player.pause(); btn.value = "Play"; } }); setInterval(function(){ curtime.innerHTML = player.currentTime; }, 250); }; </script>
3.Audio类型
<audio>元素有对应的构造函数Audio。其实不必将Audio插入到文档中,在创建Audio实例后就开始下载指定文件,下载完成后,调用play()方法就可以开始播放。
<script> window.onload = function(){ var player=new Audio("billyBrowsers.ogg"); EventUtil.addHandler(player,"canplay",function(){ player.play(); }) }; </script>