讀javascript高級程序設計12-HTML5腳本編程

時間 2019-11-12

標籤 javascript 高級程序設計 html5 html 腳本編程欄目 JavaScript 简体版

原文原文鏈接

1、跨文檔消息傳遞（XDM）

1.發送消息javascript

postMessage(msg,domain)用於發送跨文檔消息。第一個參數是要傳遞的消息內容，第二個參數表示接收方來自哪一個域。第二個參數有助於提升安全性，若是發現域不匹配則不會進行操做。html

2.接收消息java

接收到消息時，會觸發window對象的message事件。傳遞給onmessage事件處理程序的對象主要包含三個信息：瀏覽器

data:對應postMessage()第一個參數傳入的內容；
origin：發送消息的文檔所在域。接收到消息後，檢測消息來源是很是重要的步驟。
source：發送消息的文檔的window對象代理。

實例：安全

outer.html：app

<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：dom

<body>
          <span id="msg"></span>
          <input type="text" id="input">
          <input type="button" id="submit" value="提交">
          <script type="text/javascript" src="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>

2、拖放

1. 拖放事件ide

被拖動元素會依次觸發如下事件：函數

dragstart：按下鼠標鍵並開始移動時觸發；
drag：在元素被拖動期間會持續觸發該事件；
dragend：拖動中止時觸發。

當元素拖動到一個目標元素時，會依次觸發如下事件：oop

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="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>

3、媒體元素

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>