1. Requirements description
Hope to achieve such a function: click on a link, if the link browser has been opened, then refresh the link window that has been opened; if the link has not been opened, use a new window to open the link page.
This is a very good experience enhancement feature, which can effectively avoid opening redundant pages in the browser tab.
The key is how to achieve it?
In fact, it is very simple and does not require the participation of JS, HTML itself can achieve such a demand.
2. Target attribute features that you may not know
Both <a>link elements and <form>form elements have an targetattribute named , and the supported values include the following:
_self:Defaults. The current browser context._blank: Usually it is a new tab page, but the user can configure the browser whether to open in a new window._parent: The parent context of the current browser context. If there is no parent, the behavior is similar_self._top: The top browser context. If there is no ancestor context, the behavior is similar_self.
Almost all documents are described above.
But in fact, targetthere is a hidden feature, that is, it can be specified as a specific URL address or any custom name.
E.g:
<a href="blank.html" target="blank.html">空白页</a>
At this point, if the browser already has a tab whose address is blank.html, clicking the link above will not open a new window, but directly refresh the opened blank.html; if there is no address in the browser, it is blank.html Tab page, the targetproperties behave similarly at this time '_blank'.
In other words, if we want to realize the requirement of automatic link address refresh and new window opening, it targetis enough to know that the attribute values of link elements and form elements are set to the value of the target URL address.
You can click here: link to open a new window or refresh the demo
Click any of these links to experience the effect.
As you can see, target="blank.html?s=1"and target="blank.html?s=2"will be considered as two separate pages and will not refresh each other. Therefore, if you want to use one tab for all search results pages, you need to use other methods. It's simple, just specify the same value, for example:
<a href="blank.html?s=1" target="_search">空白页?s=1</a> <a href="blank.html?s=2" target="_search">空白页?s=2</a>
Three, conclusion
To realize the function of automatically refreshing <a>element hreflinks or opening new windows, you only need to set the targetattribute value to hrefbe the same as the attribute value.
This feature is supported by IE browser, Firefox browser, and Chrome browser, so feel free to use it.
As the old record is cold, the website is currently hosted on a Hong Kong host, so the access speed may be a little slow. When the old record is cancelled and the new record is successfully cancelled, it will be restored, which may take 3 weeks.
In order to reduce the migration trouble, the content will not be updated frequently this month.