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

This article mainly introduces "the method course of realizing the Communication between pages". In the daily operation, I believe that many people have doubts about the method course of realizing the communication between pages. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "the method course of realizing Communication between pages". Next, please follow the editor to study!

1. The method of realizing the communication between pages

Although we can also use postmessage for page communication, here we mainly use window.opener, the API,MDN, to explain it as follows:

The Window interface's opener property returns a reference to the window that opened the window using open ().

This means that the opener interface provided by window returns a reference to a page that opens the current page, in other words, if page An opens page B, the opener of page B will return A. In this way, we can define the global method on the A page and mount it on the window, so the B page can control the behavior of the A page through the way opener gets the A page.

At present, mainstream browsers support this API well, so we can consider using this API in most scenarios.

In order to understand his application scenario more conveniently, we implement a small function here: we define two pages, Agraine B. when page An opens page B, use page B to change the background color of page A. The code is as follows:

/ / A page parent page An opens b page function changeColor (color) {document.body.style.background = color} / / B page parent page B window.opener.changeColor ('blue')

First of all, we define a global method in the A page. When you click the a tag to jump to the newly opened B page, the B page calls the changeColor defined by A through opener, and passes the parameters to the A page, thus changing the background color of the A page. The effect is as follows:

two。 The method of realizing the communication between parent and child pages and between child pages and child pages

The parent-child page here is mainly for iframe, that is, the communication between iframe and parent page and iframe page. For example, the following figure:

We want to implement the parent page A to control the child page A, and let the child page interact with the parent page. Here we mainly use the iframe

ContentWindow

Parent.window through contentWindow, we can get the methods and dom elements inside the iframe, and then we can manipulate the iframe page

First, let's take a look at the scenario in which the parent page controls the child page: the parent page A passes a piece of data by calling the child page and displays it in the child page:

/ / parent page _ window.onload = function () {let iframe1 = $id ('a1') .contentWindow / / Control child page dom iframe1.document.body.style.background = "# 000" iframe1.loadData ({a:'1'})} function $id (id) {return document.getElementById (id)} / / child page function loadData (data) {document.body.append (`data of the parent page ${data.a} `)}

As you can see from the above, the parent page gets the window object of iframe through contentWindow, thus passing data to it and calling its methods.

Similarly, the child page can manipulate the parent page:

/ / parent page function $id (id) {return document.getElementById (id)} / / child page parent.window.$id ('bridge') [xss_clean] =' child page manipulates parent page dom' copy code

As you can see from the code, we use parent.window to get the window of the parent page, and then call the $id method provided by the parent page to manipulate the parent page dom.

Next, we will solve the problem of communication between child pages and child pages, in fact, the method has been mentioned above, we can take the parent page as a bridge, child page A gets the window of the parent page through parent.window, and then we can get the dom of another child page B, so that we can let the child page An operate child page B, and vice versa.

/ / subpage A let iframeBWin = parent.window.$id ('a2'). ContentWindow iframeBWin.onload = function () {iframeBWin.document.getElementById (' show') [xss_clean] = "greetings from subpage A"} copy the code

From the above code we can know that we use parent.window to get sub-page B and then achieve the purpose of communicating with sub-page B. in this way, we can achieve a lot of interesting things.

Note that the methods we discussed are all based on the same domain. In fact, there are many ways to achieve cross-domain, such as bridging using intermediate iframe, raising window to the top level by setting window.domain, and so on. However, there are some pitfalls in implementation, but most scenarios can be satisfied.

3. The front end realizes the file download function.

For download files, most scenarios are implemented at the back end, and the front end only needs to request the interface, but sometimes this method takes up extra resources and bandwidth. if you need to download the content generated by the user or the content has been returned to the client, the download task can be generated directly without going through the server, which can save a lot of resources and time.

Generally speaking, the idea of the front-end implementation is to dynamically create a tag, set its download attribute, and finally delete a. Files that are not pictures can generally be downloaded, but if it is a picture, some browsers will open the picture automatically, so we need to manually convert it to data:URLs or blob:URLs. Based on this principle, we can use fileReader or fetch-URL.createObjectURL. After a lot of testing here, I adopted the latter:

Function download (url, filename) {return fetch (url) .then (res = > res.blob () .then (blob = > {let a = document.createElement ('a'); let url = window.URL.createObjectURL (blob); a.href = url; a.download = filename; a.click (); window.URL.revokeObjectURL (url);}))}

This method passes in the address of a file and the name of the file you want to use, so that we can use it elegantly to download.

At this point, the study of "how to achieve communication between pages" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.