Hyperlinks that conform to web standards

Web|web Standard | link

The target attribute is not allowed 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 through certain methods, 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[i];

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[i];
if (Anchor.getattribute ("href") &&
Anchor.getattribute ("rel") = = "external")
Anchor.target = "_blank";
}
}
Window.onload = Externallinks;