As in HTML link opens in a new tab

Task

Create a link that opens a document in a new window.

Decision

By default, links open in the same window where they are located. Any reference to open in a new window, to tag should be added to the target attribute with a value of _blank, as shown in Example 1.

Example 1: Link in a new window





Ссылки


Ссылка откроется в этом окне


Ссылка откроется в новом окне



Note that if you use a strict the target attribute in HTML4 and XHTML code and condemned him will not pass validation. That in this case, to make the link to open in a new window and observe the correctness of the code, some HTML and CSS is not enough, so you have to turn to the scripts. First, you need to somehow highlight the links that will open in a new window, for example, the attribute rel with the external value. This attribute briefly describes the link or where it leads. Browsers do not perceive this attribute, but this is not required as we will check all the links via JavaScript (Example 2). To fit all the links added to the same target. But as it is done in software, the validator will not notice the trick.

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Ссылка в новом окне



Ссылка откроется в текущем окне


Ссылка откроется в новом окне



Do not lay your code directly in the comments, it is not displayed correctly. Use the service cssdeck.com or jsfiddle.net, save the code in the comments and give a link to it. And immediately see the result.

Read more:   How to create a file SITE MAP

Sponsored

  • Sponsored

TARGET _BLANK

Most of creating inbound links through target = "_ blank" and do not know of an interesting nuance - the page where we get so get partial control of invoking it page by js property window.opener .

Through window.opener.location we can do a redirect to, for example, a phishing page. It's kind of tabnabbing, only more advanced. Since the victim least expects substitution of pages in the open earlier, a trusted browser tab.

The problem is not new, but still relevant, and as I see, not many people know about it.

The problem also exists in facebook.

For example - open the post, click on the Ref. We look at what happened with the tab on which we opened this post.

I hid publication in FB because of complaints about the need to restore access to the account after clicking on the link (PRF). You can try to accommodate hidden sli.su/kitten.html publication on the page or to see how it works Habré

Sli.su/kitten.html on the page have the following code:

window.opener.location = 'https://sli.su/facebook.com/auth.html';

It creates a redirect page to the previously trusted. This is because the browser no one said that the opening page should not have access to the parent tab. At the time of publication no problems in chrome fulfills 50, firefox 45, opera 36.

Thus sin many sites, and some do not even consider it for a problem "on its side» sites.google.com/site/bughunteruniversity/nonvuln/phishing-with-window-opener

Solutions to the problem:

1. Add references:

rel="noopener"

It can also be

rel="nofollow noopener"

2. Open all external links through its own, an intermediate page that should work Code:

window.opener = null;

3. Open links in a new tab by js:

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = targetUrl;

4. catch all the clicks on the links and in the moment of transition to create a hidden iframe, through which, and to do the opening page in a new tab. github.com/danielstjules/blankshield - js plugin which, according to the description, solves the problem (not personally tested).

Read more:   CREATE A NEW WEBSITE FOR TIMEWEB

PS: In FF not working rel = «noopener» - habrahabr.ru/post/282880/#comment_8879594. Instead, it is possible to use the rel = noreferrer.

PPS: For all who think the original article https://medium.com/@jitbit/target-blank-the-most-under... - compare the date of publication. My article published on May 3rd. English language - 4th.

How to make the link open in another window or ...

If you want to link to a document that opens in a new browser window, use the attribute target = "_ blank" tag.

Create a new window is usually required in cases where reference is made to another site. In other cases it is better to open documents in the current window, as the abundance of windows can capture the reader confused.

Since the reference to the current or the new window do not differ from each other, on some sites link next to put a special icon, indicating that the document is opened in a new window.

Example 1: Create a link to a new window





Ссылки


Обычная ссылка на сайт www.htmlbook.ru


Ссылка
открывает новое окно на сайт www.htmlbook.ru



If your Web page needs to be done so that all links open in a new window, there is no need to add all the tags attribute target = "_ blank". Code can be reduced when the page first to add a , as shown in Example 2.

Example 2. Using the tag





Ссылки



Ссылка откроется в новом окне


Ссылка откроется в
текущем окне



Make the link open in the current window, in which case it is possible, if we add to the attribute target = "_ self", as shown in this example.

Read more:   AFTER CHANGE MOTHERBOARD CAN NOT RUN WINDOWS

Note that the target attribute is not valid for strict .

Read in other languages

 BelorussianEnglish Deutsch Spanish French Italian Portuguese Turkish Arab Ukrainian Swedish Hungarian Bulgarian Estonian Chinese (Simplified) Vietnamese Romanian Thai Slovenian Slovak Serbian Malay Norwegian Latvian Lithuanian Korean Japanese Indonesian Hindi Hebrew Finnish Greek Dutch Czech Danish Croatian Chinese (Traditional) Philippine Urdu Azeybardzhansky ArmenianPolish Bengal Georgian Kazakh Catalan Mongolski Russian Tadzhitsky Tamilʹskij telugu Uzbetsky

Add a comment

Your e-mail will not be published. Required fields are marked *