javascript The Definitive Guide Chapter 16 HTML5 scripting

<!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'">
            // make sure to send the message field is given field
            <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 == 'at http://www.wrox.com ') { 
                processMessage (event.data);
                // process the received data
                // Optional: sending the receipt to the source window 
                event.source.postMessage ( 'Received', 'http://p2p.wrox.com you'); 
            } 
        }); 

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

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

    </ Script> 
</ body> 

</ HTML>

// Chapter 16 HTML5 scripting 
//16.1 cross-document messaging 

//HTML5Scrip.html 


//16.2 native drag 
    events //16.2.1 drag and drop event procedure triggered by 
    // the dragstart 
    // the Drag 
    // dragend 
   
    / / when an element is dragged to a valid drop target, the following sequence of events occurs 
    // the dragenter 
    // dragover 
    // DragLeave or drop 

//16.2.2 custom drop target 
// add a listener event, the event is prohibited bubble propagation native triggering event 
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 the dataTransfer objects 
// dataTransfer object has two main methods getData () and the setData () 
// the object is only accessible in the event of an example in drag 
// var = event.dataTransfer the dataTransfer; 
// the dataTransfer.setData ( 'URL', 'HTTP: //www.wrox.com'); 
// dataTransfer.getData ( ' URL '); 


//16.2.4 dropEffect with effectAllowed 
// use dataTransfer object, and may also receive dropEffect effectAllowed properties 
// dropEffect attribute value enum 
// none dragged element can not be placed here, which is in addition to a text box the default values for all elements outside 
// move the dragged element should be moved to the drop target 
// copy should be dragged element replicate put a drop target 
// link will open goal should be placed dragged element 

// dropEffect property only properties with effectAllowed useful. effectAllowed property indicates
// element that allows to drag dropEffect. EffectAllowed enumeration value 
// unitnitialized not to be dragged element set any acts of placement
// none dragged element can not have any action 
// copy is allowed only copy of dropEffect 
// link of the link is only dropEffect 
// move value dropEffect only move the 
// copyLink copy is allowed only the link and the dropEffect 
// copyMove only allows values of copy and move the dropEffect 
// linkMove only allows values of link and move the dropEffect 
// allow arbitrary All the dropEffect 
// effectAllowed property must be set in the event handler ondragstrart 


//16.2.5 draggable 
// <IMG the src = "timg.gif" ID = "dropTarget" = draggable with "to true"> 

//16.2.6 other members 
/ * 
    the HTML5 specification dataTransfer object contains the following methods and properties. 
    
    addElement (element) adds an element as the drag element. This affects only the added data element (i.e., the drag increases as the source in response to the callback object), 
    without affecting the appearance of the page elements during a drag operation. 

    clearData (format) to clear the stored specific data format

    setDragImage (element, x, y) specifies an image occurs when a drag, the cursor is displayed below the

    types of data currently stored type 

* / 


/ * 
  16.3 media elements 

  ignored, relatively few applications 

* /

javascript The Definitive Guide Chapter 16 HTML5 scripting

Guess you like