JavaScript scripts control target attribute values

Source: Internet
Author: User

In HTML 4.0 Strict and XHTML 1.0 STRICT, the target attribute cannot be used in the <a> tag. This is a headache for web designers. it is still allowed in the Transition specification. however, we can solve this problem through some methods.

The target attribute is removed from the HTMl4.0 specification. however, it adds another property: rel. this attribute is used to specify the relationship between the document containing the link and the link. the attribute values (such as next, previous, chapter, and section) are defined in the specification. Most of these attributes are used to define the relationship between each part of a large document. in fact. the standard allows developers to freely use non-standard attribute values for specific use.

Here, we use a custom value external for the rel attribute to mark a link to open a new window.

Link code that does not comply with the latest Web standards:
<A href = "document.html" target = "_ blank"> external link </a>

Apply rel attributes:
<A href = "document.html" rel = "external"> external link </a>

Now we have built a new window link that complies with Web standards. We also need to use JavaScript to implement the new window. the script is to find all the hyperlinks in the document that we define as rel = "external" when loading a webpage.

First, we need to judge the browser.
If (! Document. getElementsByTagName) return;

GetElementsByTagName is an easy-to-use method in the DOM1 standard and is supported by most existing browsers because some old browsers such as Netscape 4 and IE4 do not support DOM1, therefore, we must determine whether this method exists to exclude earlier browsers.

Next, we use the getElementsByTagName method to obtain all the <a> labels in the document:
Var anchors = document. getElementsByTagName ("");

Anchors is assigned an array containing <a> labels. Now we must traverse each <a> label and modify it:
For (var I = 0; I <anchors. length; I ++ ){
Var anchor = anchors [I];

Find the <a> label to implement the new window
If (anchor. getAttribute ("href ")&&
Anchor. getAttribute ("rel") = "external ")

Next, create the attribute value target and assign the value "_ target ":
Anchor.tar get = "_ blank ";

Complete code:

Function externalLinks (){
If (! Document. getElementsByTagName) return;
Var anchors = document. getElementsByTagName ("");
For (var I = 0; I <anchors. length; I ++ ){
Var anchor = anchors [I];
If (anchor. getAttribute ("href ")&&
Anchor. getAttribute ("rel") = "external ")
Anchor.tar get = "_ blank ";
}
}
Window. onload = externalLinks;

Related Article

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.