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;
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:
The code is as follows: |
Copy code |
Function externalLinks (){ If (! Document. getElementsByTagName) return; Var anchors = document. getElementsByTagName (""); For (var I = 0; I <anchors. length; I ++ ){ Var anchor = anchors; If (anchor. getAttribute ("href ")&& Anchor. getAttribute ("rel") = "external ") Anchor.tar get = "_ blank "; } } Window. onload = externalLinks; |