Several older due to maintenance projects before I developed with jquery family bucket, some requirements are needed across the page and the parent-child interactive communication pages, so take this summary. The other one is the front-end implementation file download function, although many methods, in order to not have to repeat create the wheel, or in this summary of a wave, after all application scenarios in multi-page or many.
Abstract
Implementation of communication between the pages of
implementation of communication between father and son pages and subpages with subpages
front-end implementation file download function
due to the introduction of this article is mainly based on javascript, does not involve any frameworks (If you want to study vue, react , technical issues angular aspects of the venue can my other articles), so let's use the native javascript to solve the problems we mentioned above it.
text
- The method of communication between pages
although we can achieve using postmessage page communication, but here we mainly use window.opener this API, MDN it is explained as follows:
The Window interface's opener property returns a reference to the window that opened the window using open().
It means that the opener window provides an interface to return a reference to the current page open a page, in other words, if A page opens B, then opener B page will return A. In this way, we can define a global approach to mount on the window, then B Method A page can page through the opener got to control the behavior of the A page A page.
Current mainstream browsers are better API support for this, so in most scenarios we can consider using this API.
In order to facilitate understanding of his application scenarios, we are here to achieve a small feature: We define two pages, A, B, B when A page opens a page, we change the background color of the page A with B page. code show as below:
// A页面
<body>
<h1>父页面A</h1>
<a href="./b.html" target="_blank">打开b页面</a>
<script>
function changeColor(color) {
document.body.style.background = color
}
</script>
</body>
// B page
<body>
<h1 of> parent page B </ h1 of>
<Script>
window.opener.changeColor ( 'Blue')
</ Script>
</ body>
Copy the code
First, we define a global pages method A when you click on a label to jump to the newly opened page B, page B is through the opener, calling a defined changeColor, and pass parameters to the a page to change the background color a page. Results are as follows:
2. Communication between father and son pages and subpages with subpages way
father and son iframe page mainly for purposes of that communication between the iframe and the iframe page and the parent page here. For example, the following figure:
We want to achieve control of the parent page A sub-pages A, B, and let the parent page and sub-page interactive, here we mainly use the iframe
contentWindow
parent.window by contentWindow, we can get a dom element method and internal iframe, and can be manipulated iframe page
first, we take a look at the scene of the parent page manipulation of sub-pages: a call to a sub-page parent page of a data transfer method, and displayed in the sub-page:
// parent page
the window.onload = function () {
the let iframe1 ID = $ ( 'A1') contentWindow;.
@ Subpage control DOM
iframe1.document.body.style.background = "# 000"
iframe1.loadData ({ A: '. 1'})
}
function $id(id) {
return document.getElementById(id)
}
// subpages
function the loadData (Data) {
document.body.append ( 父页面的数据数据${data.a})
}
copy the code
from the foregoing, the parent page so that the data transmitted thereto and call its methods to get the iframe window object by contentWindow.
Similarly, sub-pages can be manipulated the parent page:
// parent page
function $ ID (ID) {
return document.getElementById (ID)
}
// subpage
parent.window. $ Id ( 'bridge' ). InnerHTML = ' subpage control parent page dom'
copy the code
from the code We see, we used to get the window parent.window parent page, and then call $ id method parent page provided to operate the parent page dom.
Now let's solve the problem of communication sub-pages and sub-pages, in fact, already mentioned in the above method, we can put the parent page as a bridge, through parent.window subpages A window to get the parent page, and then you can get another child dom page B, so that we can make subpages a sub-pages operation B, and vice versa same.
// subpages A
the let iframeBWin = parent.window. $ ID ( 'A2'). ContentWindow
iframeBWin.onload = function () {
iframeBWin.document.getElementById ( 'Show'). The innerHTML = "greetings from the sub-pages of A"
}
copy the code
and we know that the code above, we get the object subpage B and B so as to realize the communication by the sub-pages parent.window, in this way, we can achieve a lot of interesting things.
Note that these methods we have discussed are under the same domain, in fact, cross-domain-based method there are many, such as the use of an intermediate bridging iframe by setting window.domain raise the window to the top and so on, but also to implement some pit, but most of the scene can meet.
4. The front-end implementation file download function
to download files, most of the scenes are to achieve back-end, point-side refers to the request interface needs just fine, but sometimes this way but will take up extra resources and bandwidth, if necessary Download is user-generated content or content has been returned to the client, and this time without the server can directly generate download tasks, can save a lot of resources and time overhead.
Generally the front end of the idea is to achieve a dynamic created by the label, set its properties download, and finally delete a like for picture files are generally not available for download, but if a picture, some browsers will automatically open the picture, so we need to manually put it into data: URLs or blob: URLs, based on this principle, we can use fileReader, you can also use fetch-URL.createObjectURL, where extensive testing I used the latter:
downloads function (URL, filename) {
. FETCH return (URL) .then (RES => res.blob () the then (BLOB => {
the let A = document.createElement ( 'A');
the let = window.URL URL. createObjectURL (BLOB);
a.href = URL;
a.download = filename;
a.click ();
window.URL.revokeObjectURL (URL);
}))
}
copy the code
which the incoming address and a file desired to use file name, so that we can use it to achieve an elegant downloaded.
Finally,
because the author wrote in a recent open source CMS systems, technical architecture:
Background Node + Koa + redis + JsonSchema
management background interface vue-cli3 + vue + ts + vuex + antd-vue + axios
client reception react + antd + react-hooks + axios
later launch design of the system architecture and implementation process, welcomed the public number "Something about