Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "the method of cross-domain data interaction using window.postMessage at the front end". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "the method of cross-domain data interaction using window.postMessage at the front end" can help you solve the problem.

Background

In a H5 embedded in App, the product hopes to set up an area at the lower end of the page to display the teaching page generated by the operator students through the platform built by the activity. The page is built and replaced by the operator students themselves. The product students hope that the content of this teaching page can be fully displayed in H5.

In terms of business requirements, one H5 (A page) needs to load another H5 page (B page) through iframe. But from a technical point of view, there are the following points to pay attention to:

The height of the B page is uncertain. The B page is generated by the activity building platform. It is not known what the content is and how much it is displayed.

Page An and page B are not of the same origin, so the size of page B cannot be obtained directly through iframe's contentWindow.

Solution method

In fact, join 1, 2 points, the core is to get the height of the B page on the A page, and then adjust the height of the display area of the A page to achieve the function of fully displaying the B page on the A page.

Preliminary idea

Here I thought of using window.postMessage to solve the problem of page communication in different domains. Page A cannot actively obtain the size of page B through contentWindow in different domains, so just let page B notify page A through window.postMessage, and you can always get your own.

But the problem is that the B page is not certain, it is generated by the operator by building the platform, that is to say, there is no way to notify the A page through code intrusion on the B page.

Further ideas

In fact, building the components in the platform is achievable. You can develop a "iframe communication component", and then build a C page as a "bridge" based on this component. Then, because both the B page and the C page are generated by building the platform and are in the same domain, the C page can actively obtain the height of the B page through iframe's contentWindow. Finally, although page An and page C are cross-domain, cross-domain communication can be achieved through window.postMessage, and page An only needs to listen to message events.

With such a C page as a "bridge", no matter what page the operator publishes by building a platform, page A can fully display the contents of page B, and page B does not need to do anything.

Pre-knowledge postMessageotherWindow.postMessage (message, targetOrigin, [transfer])

First of all, otherWindow is a reference to other windows. Under what circumstances can you get other windows? You can use iframe's contentWindow, window.opener (where this page was opened), and window.parent (when A pages nest C pages through iframe, C pages can get references to A pages through window.parent).

Message is an object. To put it simply, a deep copy is made by default during transmission, so you don't have to worry about referencing. Specific copy rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm (found another way to achieve deep copy? )

TargetOrigin uses this parameter to implement which windows can receive this message. If it is'*', then it is OK. You can pass in a URI string, which will be compared by protocol, CVM address and port. If one of the three does not match, it cannot be passed.

Implement the C page

Let's first implement the C page as a "bridge", which is the main implementation.

First of all, the C page is loaded by the A page through iframe, so here we get the link to the B page by getting the parameters on the URL.

Const src = getQueryString ('src')

After getting the link, the C page loads the B page through iframe and adds it to the document. In order to get a link to page B, we need to get it after the onload event on page B is triggered, when the image on the page has been loaded.

Const iframe = document.createElement ('iframe'); iframe.addEventListener (' load', () = > {/ / critical steps}); iframe.src = src;iframe.style.visibility = 'hidden';document.body.appendChild (iframe)

Finally, the key step in the onload event is to get the height of the B page and send the height parameters to the A page through postMessage.

Get the height of the B page:

Const doc = iframe.contentDocument;const iframeHeight = Math.max (doc.body.clientHeight, doc.documentElement.clientHeight, doc.body.scrollHeight, doc.documentElement.scrollHeight)

Get a reference to the window object of page A through window.parent, and finally send a message to page A through window.parent.postMessage:

If (window.parent) {window.parent.postMessage ({type: 'resize-iframe', data: {height: iframeHeight}},' *');} A page

What the A page does is relatively simple: one iframe loads the B page and the other iframe loads the C page. Get the final height through the message event and adjust the height of the B page iframe.

Const resizeHandler = (e) = > {const data = e.data; if (data.type = 'resize-iframe') {const {height} = data.data; / / the minimum height is set here this.height = Math.max (400, height);}}; window.addEventListener (' message', resizeHandler); this is the end of the introduction on "the method of cross-domain data interaction using window.postMessage at the front end". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.