码迷,mamicode.com
首页 > 编程语言 > 详细

javascript权威指南第16章 HTML5脚本编程

时间:2019-09-14 00:32:50      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:移动   drag   process   format   head   asc   orm   efault   数据   

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="HTML5Script.js"></script>
    <script type="text/javascript" src="EventUtilExt.js"></script>
</head>

<body>
    <iframe src="htt://www.wrox.com" id="myframe" width="400" height="300"></iframe>
    <div aria-busy="true" style="width:600px;height:300px;background-color:honeydew;" draggable="true">
        <img src="timg.gif" id="droptarget" draggable="true">
    </div>
    <div>
        <video src="conference.mpg" id="myVideo">Video player not available.</video>
        <!-- 嵌入视频 -->
        <video id="myvideo">
            <source src="conference.webm" type="video/webm;codecs=‘vp8‘ vorbis‘">
            <source src="conference.ogv" type="video/ogg;codecs=‘theora‘ vorbis‘">
            <source src="conference.mpg">
            Video player not available.
        </video>
        <!-- 嵌入音频 -->
        <video >
            <source src="song.ogg" type="audio/ogg" >
            <source src="song.mp3" type="audio/mpeg" >
             Video player not available.
        </video>

    </div>
    <script type="text/javascript">

        EventUtilExt.addHandler(window, ‘message‘, function (event) {
            //确保发送消息的域是已知域
            if (event.origin == ‘http://www.wrox.com‘) {
                //处理接收到的数据
                processMessage(event.data);
                //可选:向来源窗口发送回执
                event.source.postMessage(‘Received‘, ‘http://p2p.wrox.com‘);
            }
        });

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

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

    </script>
</body>

</html>

  

//第16章 HTML5脚本编程
//16.1 跨文档消息传递

//HTML5Scrip.html


//16.2 原生拖放
    //16.2.1 拖放事件 拖动过程触发的事件
    //dragstart
    //drag
    //dragend
   
    //当某个元素被拖动到一个有效的放置目标上时,下列事件会依次发生
    //dragenter
    //dragover
    //dragleave or drop

//16.2.2 自定义放置目标
//添加监听事件,禁止事件冒泡传播触发原生事件
var droptarget =document.getElementById(‘droptarget‘);

EventUtilExt.addHandler(droptarget,‘dragover‘,function(event){
    EventUtilExt.preventDefault(event);
});

EventUtilExt.addHandler(droptarget,‘dragenter‘,function(event){
    EventUtilExt.preventDefault(event);
});

EventUtilExt.addHandler(droptarget,‘drop‘,function(event){
    EventUtilExt.preventDefault(event);
});

//16.2.3 dataTransfer 对象
// dataTransfer对象有两个主要方法 getData() 和 setData()
// 该对象只有在拖放事件中访问 如下示例
// var dataTransfer = event.dataTransfer;
// dataTransfer.setData(‘url‘,‘http://www.wrox.com‘);
// dataTransfer.getData(‘url‘);


//16.2.4 dropEffect 与 effectAllowed
//利用dataTransfer对象,还可以接收 dropEffect 和 effectAllowed 属性
// dropEffect 属性值枚举
//none 不能把拖动的元素放在这里,这是除文本框之外所有的元素的默认值
//move 应该把拖动的元素移动到放置目标
//copy 应该把拖动的元素复制放放置目标
//link 应该放置目标会打开拖动的元素

//dropEffect属性只有搭配effectAllowed 属性才有用。effectAllowed属性表示
//允许拖动元素那种dropEffect. effectAllowed的值枚举
//unitnitialized 没有给被拖动的元素设置任何放置行为
//none  被拖动的元素不能有任何行为
//copy  只允许值为copy 的dropEffect
//link  只允许值为link 的dropEffect
//move  只允许值为move 的dropEffect
//copyLink  只允许值为copy和link 的dropEffect
//copyMove  只允许值为copy和move 的dropEffect
//linkMove  只允许值为link和move 的dropEffect
//all       允许任意dropEffect
//必须在ondragstrart事件处理程序设置effectAllowed属性


//16.2.5 可拖动
//  <img src="timg.gif" id="droptarget" draggable="true"> 

//16.2.6 其他成员
/*
    HTML5规范规定dataTransfer 对象还包含下列方法和属性。
    
    addElement(element)  为拖动元素添加一个元素。添加这个元素只影响数据(即增加作为拖动源而响应回调对象),
    不会影响拖动操作时页面元素的外观。

    clearData(format) 清除以特定格式保存的数据

    setDragImage(element,x,y) 指定一幅图像,当拖动时发生,显示在光标下方

    types 当前保存的数据类型

*/


/*
  16.3 媒体元素

  忽略,应用中比较少

*/

  

javascript权威指南第16章 HTML5脚本编程

标签:移动   drag   process   format   head   asc   orm   efault   数据   

原文地址:https://www.cnblogs.com/ms_senda/p/11517928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!