Useful blog

HTML5 Script Programming

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

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.

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

When an element is dragged onto a valid placement target

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.

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

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

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:

Exit mobile version