Code to control the target property of a link using JavaScript _ Experience Exchange

Source: Internet
Author: User
The use of the target attribute in tags is not allowed in HTML 4.0 strict and XHTML 1.0 strict, which is a frustrating thing for web designers. It is still permissible in the specification of the transition. But by some means, we can solve this problem.

The target attribute was removed from the HTMl4.0 specification. But it adds another attribute: Rel. This property is used to specify the relationship between the document containing the link and the linked document. The attribute value (e.g., next,previous,chapter,section) is defined in the specification. , most of these attributes are used to define the relationship between the small parts of a large document. In fact, the specification allows developers to freely use non-standard attribute values for specific applications.

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

Link codes that do not conform to the latest Web standards:
External link
Use the Rel attribute:
External link
Now that we've built a new window link that conforms to the Web standard, we also need to use JavaScript to implement a new window. The work of the script is to find all the hyperlinks in the document that we define as rel= "external" when the page is loaded.

First we have to judge the browser.
if (!document.getelementsbytagname) return;
getElementsByTagName is an easy-to-use method in the DOM1 standard, and it is supported by most browsers today, as some older browsers such as Netscape 4 and IE4 do not support DOM1, So we have to rule out the old versions of the browser by determining whether this method exists.

Next, we get all the tags in the document through the getElementsByTagName method:
var anchors = document.getElementsByTagName ("a");
Anchors is assigned to an array that contains individual tags, and now we have to traverse the individual tags and modify it:
for (var i=0; i < anchors.length; i++) {
var anchor = anchors;
}
Find the label that will implement the new open window
if (Anchor.getattribute ("href") && anchor.getattribute ("rel") = = "external")
Next. Establish the property value target and assign the value "_target":
Anchor.target = "_blank";
The complete code:
Copy CodeThe code is as follows:
function Externallinks () {
if (!document.getelementsbytagname)
Return
var anchors = document.getElementsByTagName ("a");
for (var i=0; i var anchor = anchors;
if (Anchor.getattribute ("href") && anchor.getattribute ("rel") = = "external")
Anchor.target = "_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.