Web Standard: Target properties How to use JS to control?

Source: Internet
Author: User
Tags define implement return window
js| Standard | control | Web pages do not allow the target attribute to be used in <a> tags in HTML 4.0 strict and XHTML 1.0 strict, which is a frustrating thing for web designers. It is still allowed 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 added another attribute: Rel. This property is used to specify the relationship between the document that contains the link and the document that is linked. The specification defines its attribute values (e.g., next,previous,chapter,section) , most of these attributes are used to define the relationships between the small parts of a large document. In fact, the specification allows developers to use non-standard attribute values for specific applications freely.

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 conform to the latest Web standards:
<a href= "document.html" target= "_blank" >external link</a>

Using the Rel attribute:
<a href= "document.html" rel= "external" >external link</a>

Now that we've built a Web-standard new Window link, we need to use JavaScript to implement a new window. The job of the script is to find all the hyperlinks in the document that we define as rel= "external" when the page loads.

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 because some older browsers such as Netscape 4 and IE4 do not support DOM1, So we have to rule out these older browsers by determining if this method exists.

Next, we get all the <a> tags in the document through the getElementsByTagName method:
var anchors = document.getElementsByTagName ("a");

Anchors is assigned to an array containing the <a> tags, now we have to iterate through the <a> tags and modify it:

for (Var i=0 i < anchors.length; i++) {
var anchor = anchors;

Find the <a> label to implement the new open window
if (Anchor.getattribute ("href") &&
Anchor.getattribute ("rel") = = "external")
Next. Set the property value target and assign "_target":
Anchor.target = "_blank";

Complete code:
function Externallinks () {
if (!document.getelementsbytagname) return;
var anchors = document.getElementsByTagName ("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors;
if (Anchor.getattribute ("href") &&
Anchor.getattribute ("rel") = = "external")
Anchor.target = "_blank";
}
}
Window.onload = Externallinks;

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.