


Detailed explanation of new features of HTML5: Cross-document message transmission
1. Same domain restriction
The so-called "same domain restriction" refers to For security reasons, browsers only allow scripts to communicate with addresses of the same protocol, same domain name, and same port.
2. Window.postMessage methodBrowser restrictions are different Communication between windows (including iFrame windows), unless the two windows load web pages under the same domain name. The window.postMessage method is specifically designed to solve this problem, allowing users of different domain names to communicate. Windows communicate with each other. The format of thepostMessage method is as follows:
targetWindow.postMessage(message, targetURL[, transferObject]);The targetWindow in the above code is the
variable
pointing to the target window, message is the message to be sent, and the targetURL is the specified The URL of the target window will not send information if it does not match the URL. The transferObject is the Transferableobject that is sent along with the information. Assume that a new window pops up on the current web page. ##Then listen to the message event
on the current web page.var popup = window.open(...popup details ...);The above code specifies the
callback function of the message event is receiveMessage, once it is received from other windows message, the receiveMessage function will be called. The receiveMessage function accepts an event event object as a parameter. The origin attribute
in the parameter indicates the source URL of the message. If the URL does not meet the requirements, event. The data attribute contains the information actually sent. In addition to origin and data, the attributes of the event object also have a source attribute, which points to the window object that sends the information to the current web page.Then, Use the postMessage method to send information to a new window on the current web page.
window.addEventListener('message', receiveMessage, false); function receiveMessage(e) { if (e.origin != 'http://example.org') { return; } console.log(e.data); }The first parameter of the postMessage method in the above code is the actual information sent, and the second parameter specifies that the domain name of the sending object must be http: //example.org. If the other party's window is not this domain name, the information will not be sent. Finally, deploy the following code in the popup window.
popup.postMessage('hello world!', 'http://example.org');There are several places in the above code. Note. First of all, there is no source of filtered information in the receiveMessage function, and information sent from any URL will be processed. Secondly, the URL of the target window specified in the postMessage method is an asterisk, indicating that the information can be sent to any URL. Generally speaking, these two methods are not recommended because they are not safe enough and may be filtered by the other party. All browsers support this method, but IE8 and IE9 only allow the postMessage method to communicate with the iFrame window and not with the new window. IE10 allows communication with new windows, but only using the IE-specific MessageChannel object
The above is the detailed content of Detailed explanation of new features of HTML5: Cross-document message transmission. For more information, please follow other related articles on the PHP Chinese website!

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Atom editor mac version download
The most popular open source editor