HTML5 Script Programming

HTML5 has defined some new markup rules and also new JavaScript APIs that enable developers to create better user interfaces.

• The cross document messaging API can transmit messages between documents in different domains without compromising the security of the same source policy

• The native drag and drop function can specify that an element can be dragged and respond when the operating system needs to place it. It can create draggable elements and place targets

• Media elements<- audio ->and<- video ->have their own APIs for interacting with audio and video, and use – canPlayType() to check if the browser supports specific formats

• Historical state management can modify the browser’s historical state stack without uninstalling the current page. Under this mechanism, users can switch between page states through the back and forward buttons, which are completely controlled by JavaScript

Cross document messaging

The window. postMessage () method can securely achieve cross source communication. Typically, for scripts on two different pages, only when the executing page is on the same protocol (usually https), port number (443 is https), and host name, can the two scripts communicate with each other. The window. postMessage () method provides a controlled mechanism to circumvent this restriction, and as long as used correctly, this method is very secure.

• OtherWindow is a reference to other windows, such as the contentWidow property of an iframe, the window object returned by executing window. open, or a named or numerically indexed window. frames

• The data that the message will be sent to other windows will be serialized by a structured cloning algorithm, allowing unrestricted secure transfer of data objects to windows without the need for self serialization

• TargetOrigin specifies which windows can receive message events through the origin property of the window. When set to *, it can send messages to documents from any domain

• A string of Transferable objects passed simultaneously with the message, whose ownership will be transferred to the recipient of the message

When the window. postMessage () method is called, a messageEvent message will be dispatched to the target window after all page scripts have been executed. The data property is the first parameter of window. postMessage, where origin is the origin of the message sender window when calling postMessage, and source is a reference to the window that sent the message.

Cross document messaging, abbreviated as XDM, refers to the transfer of messages between pages in different domains. Using the postMessage () method, a page sends a message to the.

Native drag and drop

Trigger sequentially when dragging elements

• dragstart
• drag
• dragend

When an element is dragged onto a valid placement target

• dragenter
• dragover
• dragleave  or  drop

The dataTransfer object is a property of an event object used to pass string format data from the dragged element to the drop target, with two methods: getData() and setData(). In IE, only text and URL are defined, while in HTML5, these two types are mapped to text/plain and text/uri list. The data saved in the dataTransfer object can only be read in the drop event handler. The dropEffect property of the dataTransfer object can determine which placement behavior the dragged element can perform.

• none
• move
• copy
• link

The dropEffect property is only useful when combined with the effectAllowed property, and it must be set in the ondragstart event handler.

• uninitialized
• none
• copy
• link
• move
• copyLink
• copyMove
• linkMove
• all

Setting the draggable property on an element can set whether the element is draggable. Other methods and properties of dataTransfer:

• addElement(ele) ,add an element for dragging
• clearData() ,clear data saved in a specific format
• setDragImage(ele, x, y) ,specify an image to display below the cursor when dragging occurs
• types,the current saved data type

Media elements

<- audio ->and<- video ->can embed cross browser audio and video content in web pages, allowing for the creation of custom controls for media, and providing comprehensive properties and events. CanPlayType detects whether the browser supports a certain codec.

By using the history object for historical state management, the browser’s historical state stack can be modified without uninstalling the current page. Users can switch between page states through the forward and backward buttons, which are completely controlled by JavaScript. The attributes and methods include:

• length
• state
• back()
• forward()
• go()
• pushState() ,add new state information to the historical state stack
• replace() ,update current status