Href tag target = _ blank

Source: Internet
Author: User

We all know that the href attribute of the html hyperlink tag target = "_ blank" is used to make the opened link appear in a new window. But apart from writing it directly in the href tag, do you know any other clever methods to add target = "_ blank" to the link? The authors will share with you how to skillfully use the href target = "_ blank" tag.

First, let's take a look at the usefulness of target = "_ blank:

<A href = "http://www.phpernote.com/php-template-framework/189.html" target = "_ blank"> php + js implement waterfall Streaming Effect </a>
<Form action = "http://www.phpernote.com/php-function/172.html" target = "_ blank"> 10 uncommon but useful PHP functions <input type = "submit" value = "submit button"> </ form>

In the above Code, if the target = "_ blank" attribute is not added, it is opened directly on this page by default, that is, target = "_ self ".

Next, let's talk about how we suddenly think of this label! When I designed my website, I didn't have much idea about the link. All the link elements were opened in _ self. Only now can we find that there are a lot of problems, so we won't talk about our own internal links on this site. However, most of the links posted in this article are links to other websites, these links are opened directly in the form of _ self. This problem arises, and the user experience is poor. It is a huge loss to the traffic and weight of your website. How can this problem be solved? What I need is to implement the target = "_ blank" attribute of href locally on the webpage page, and finally come up with two methods:

(1) manually add target = "_ blank" to these links, but this method is too stupid and time-consuming and laborious.

(2) Add the <base target = "_ blank"> label to the head label of the page. This label enables all connections on the page to be opened in the form of a new window. However, it seems that this user experience is poor. After a user browses a few webpages, all the pages opened are my website. This will make people feel uncomfortable, at least I think so. And this is not standard in strict W3C standards. Why? The reason is humane because foreigners believe that it is impolite to open a new window without the user's consent and do not respect the user's choice.

What should we do at this time?

After searching a large amount of data, it is concluded that the href tag adds a new attribute in HTML 4.0: rel, which is used to indicate the relationship between the link and the page containing the link, and the object opened by the link. Rel has many attribute values, such as next, previous, chapter, and section. Here we can use the rel = "external" attribute. The original code is as follows:

<A href = "http://www.phpernote.com/javascript-function/510.html" target = "_ blank"> the lower right corner of the pop-up ad js, floating effect (compatible with multiple browsers) </a>

Now we need to write it like this:

<A href = "http://www.phpernote.com/javascript-function/510.html" rel = "external"> the lower right corner of the pop-up ad js, floating effect (compatible with multiple browsers) </a>

This is a method that complies with the strict standard. However, javascript must be used together. The relevant code JS is as follows:

function externallinks(){if(!document.getElementsByTagName){return;}var anchors=document.getElementsByTagName("a");for(var i=0;i<anchors.length;i++){var anchor=anchors[i];if(anchor.getAttribute("href")&&anchor.getAttribute("rel")=="external"){anchor.target="_blank";}}}window.onload=externallinks;

You can save the above Code as a. js file (such as external. js) and call it through the external connection method:

<Script type = "text/javascript" src = "http://www.phpernote.com/external.js"> </script>

This solves the problem of implementing the target = "_ blank" attribute of href on a webpage.

Articles you may be interested in
  • Differences and usage of return, exit, break, and contiue in PHP
  • How to Write float attributes in css in JS
  • Canonical tags and their functions [website SEO]
  • MySQL replace function replacement string statement usage
  • Iframe attribute description
  • How to set the DIV layer to display on a flash object, compatible with browsers such as ie and firefox
  • A solution that does not work when textarea submits content
  • Functions and usage of the php get_headers Function

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.