zoukankan      html  css  js  c++  java
  • HTML5脚本编程

    一.跨文档消息传递:cross-document messaging 简XDM  。

    1.它的核心是postMessage()方法:目的是向另一个地方传递数据,对于XDM而言,“另一个地方”指的是包含在当前页面中的<iframe>元素,或者由当前页面弹出的窗口。

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

    3.支持XDM的浏览器有IE8+ Firefox3.5+ Safari4+ Opera Chrome ios版Safari 以及Android版WebKit

    二.原生拖放

    1.拖动某元素将以此触发下列事件dragstart drag dragend

    2.当某个元素被拖动到一个有效的放置目标上时,下列事件会依次发生:dragenter dragover dragleave或drop.只要有元素被拖动到放置目标上,就会触发dragenter事件,紧随其后的是dragover事件.而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件。如果元素被拖放到了放置目标中,则会触发drop事件而不是dragleave事件。

    3.在拖动元素经过某些无效放置目标时,可以看到一种特殊的光标,表示不能放置,虽然所有元素都支持放置目标事件,但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如何操作,都不会发生drop事件。不过可以通过下面方法吧任何元素都变成有效放置目标:就是重写dragenter和dragover事件的默认行为。例如,假设有一个ID为“droptarget”的div元素,可以用下面代码将它变成一个放置目标。如下

    var droptarget = document.getElementById("droptarget");

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

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

    以上代码执行后,光标变成了允许放置的的符号,也就可以触发drop事件了。

    而在Firefox3.5+中,放置事件的默认行为是打开被放到放置目标上的URL。也就是说,如果是把图像拖放到放置目标上,页面会转向图像文件;而如果是把文本拖放到放置目标上,则会导致无效URL错误,因此为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL:

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

    5.dataTransfer对象:它是事件对象的一个属性,用于从被拖动元素放置目标传递字符串格式的数据 。它主要有两个方法:getData()和setData()访问的时候如下 :

    event.dataTransfer.setData("text", "some text");
    var text = event.dataTransfer.getData("text");

    在拖动文本框的文本时,浏览器会调用setData()方法,将拖动的文本以"text"格式保存在dataTransfer对象中.类似地,在拖放链接或图像时,会调用setData() 方法并保存URL,然后,在这些元素被拖放到放置目标时,通过getData()读到这些数据。 也可以再dragstart事件处理程序中调用setData(),手工保存自己要传输的数据,以便将来使用。

    Firefox在其第五个版本之前不能正确地将“url”和“text”映射为“text/uri-list” 和“text/plain”.但是却能把"Text"映射为“text/plain”. 为了更好地在跨浏览器的情况下从dataTransfer对象取得数据,最好在取得URL数据时检测两个值,而在取得文本数据时使用“Text”.

    var dataTransfer = event.dataTransfer;

    //读取URL

    var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");

    //读取文本

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

    4.dropEffect和effectAllowed属性

    三媒体元素HTML5新增了两个与媒体相关的标签分别是视频<audio>和音频<video>

    首先是<video>简易播放MP3的代码


    <script>
    var EventUtil = {
        //addHandler方法有3个参数:要操作的元素、事件名称和时间处理程序函数
        //addHandler方法的作用是添加时间处理程序
        addHandler : function(element,type,handler){
            if (element.addEventListener){
                element.addEventListener(type , handler, false);    
            } else if (element.attachEvent){
                element.attachEvent("on"+type, handler);
            } else {
                element["on" + type] = handler;
            }
        }
    };
    </script>
    <body>
    <div class="mediaplayer">
       <div class="video">
           <video id="player" src="f(x)-La Cha Ta.mp3" poster="mymovie.jpg" width="300" height="200">
              video player not available
           </video>
       </div>
       <div class="controls">
           <input type="button"  value="play" id="video-btn" />
           <span id="curtime"> 0</span>/<span id="duration">0</span>
       </div>
    </div>
    <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.pause();
           btn.value = "Play";
        }
    });

    //定时更新当前时间
    setInterval(function(){
        curtime.innerHTML = player.currentTime;
    },250);
    </script>
    </body>

  • 相关阅读:
    Hadoop 学习笔记 (十) hadoop2.2.0 生产环境部署 HDFS HA Federation 含Yarn部署
    hadoop 2.x 安装包目录结构分析
    词聚类
    Hadoop 学习笔记 (十一) MapReduce 求平均成绩
    Hadoop 学习笔记 (十) MapReduce实现排序 全局变量
    Hadoop 学习笔记 (九) hadoop2.2.0 生产环境部署 HDFS HA部署方法
    Visual Studio Code 快捷键大全(Windows)
    Eclipse安装教程 ——史上最详细安装Java &Python教程说明
    jquery操作select(取值,设置选中)
    $.ajax 中的contentType
  • 原文地址:https://www.cnblogs.com/luhangnote/p/2649131.html
Copyright © 2011-2022 走看看