Link

JavaScript

JavaScript语言参考手册      技术交流 :迷途知返 pwwang.com
JavaScript手册
【目录】 【上一页】 【下一页】 【索引】

Link

A piece of text, an image, or an area of an image identified as a hypertext link. When the user clicks the link text, image, or area, the link hypertext reference is loaded into its target window. Area objects are a type of Link object.

客户端对象
实现版本Navigator 2.0
Navigator 3.0: 添加了 onMouseOut event handler; 添加了 Area objects; links array contains areas created with <AREA HREF="...">
Navigator 4.0: 添加了 handleEvent 方法

创建源

By using the HTML A or AREA tag or by a call to the String.link method. The JavaScript runtime engine creates a Link object corresponding to each A and AREA tag in your document that supplies the HREF attribute. It puts these objects as an array in the document.links property. You access a Link object by indexing this array.

To define a link with the String.link method:

theString.link(hrefAttribute) where:

theStringA String object.
hrefAttributeAny string that specifies the HREF attribute of the A tag; it should be a valid URL (relative or absolute).

To define a link with the A or MAP tag, use standard HTML语法 with the addition of JavaScript event handlers. If you're going to use the onMouseOut or onMouseOver event handlers, you must supply a value for the HREF attribute.

事件句柄

Area objects have the following event handlers:

Link objects have the following event handlers:

描述

Each Link object is a location object and has the same properties as a location object.

If a Link object is also an Anchor object, the object has entries in both the anchors and links arrays.

When a user clicks a Link object and navigates to the destination document (specified by HREF="locationOrURL"), the destination document's referrer property contains the URL of the source document. Evaluate the referrer property from the destination document.

You can use a Link object to execute a JavaScript function rather than link to a hypertext reference by specifying the javascript: URL protocol for the link's HREF attribute. You might want to do this if the link surrounds an Image object and you want to execute JavaScript code when the image is clicked. Or you might want to use a link instead of a button to execute JavaScript code.

For example, when a user clicks the following links, the slower and faster functions execute:

<A HREF="javascript:slower()">Slower</A>
<A HREF="javascript:faster()">Faster</A>
You can use a Link object to do nothing rather than link to a hypertext reference by specifying the javascript:void(0) URL protocol for the link's HREF attribute. You might want to do this if the link surrounds an Image object and you want to use the link's event handlers with the image. When a user clicks the following link or image, nothing happens:

<A HREF="javascript:void(0)">Click here to do nothing</A> <A HREF="javascript:void(0)">
   <IMG SRC="images\globe.gif" ALIGN="top" HEIGHT="50" WIDTH="50">
</A>

属性概览

hashSpecifies an anchor name in the URL.
hostSpecifies the host and domain name, or IP address, of a network host.
hostnameSpecifies the host:port portion of the URL.
hrefSpecifies the entire URL.
pathnameSpecifies the URL-path portion of the URL.
portSpecifies the communications port that the server uses.
protocolSpecifies the beginning of the URL, including the colon.
searchSpecifies a query string.
targetReflects the TARGET attribute.
textA string containing the content of the corresponding A tag.

方法概览

handleEvent调用指定事件的控制句柄。

示例

示例 1. The following example creates a hypertext link to an anchor named javascript_intro:

<A HREF="#javascript_intro">Introduction to JavaScript</A> 示例 2. The following example creates a hypertext link to an anchor named numbers in the file doc3.html in the window window2. If window2 does not exist, it is created.

<LI><A HREF=doc3.html#numbers TARGET="window2">Numbers</A> 示例 3. The following example takes the user back x entries in the history list:

<A HREF="javascript:history.go(-1 * x)">Click here</A> 示例 4. The following example creates a hypertext link to a URL. The user can use the set of radio buttons to choose between three URLs. The link's onClick event handler sets the URL (the link's href property) based on the selected radio button. The link also has an onMouseOver event handler that changes the window's status property. As the example shows, you must return true to set the window.status property in the onMouseOver event handler.

<SCRIPT>
var destHREF="http://home.netscape.com/"
</SCRIPT>
<FORM NAME="form1">
<B>Choose a destination from the following list, then click "Click me" below.</B>
<BR><INPUT TYPE="radio" NAME="destination" VALUE="netscape"
   onClick="destHREF='http://home.netscape.com/'"> Netscape home page
<BR><INPUT TYPE="radio" NAME="destination" VALUE="sun"
   onClick="destHREF='http://www.sun.com/'"> Sun home page
<BR><INPUT TYPE="radio" NAME="destination" VALUE="rfc1867"
   onClick="destHREF='http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt'"> RFC 1867
<P><A HREF=""
   onMouseOver="window.status='Click this if you dare!'; return true"
   onClick="this.href=destHREF">
   <B>Click me</B></A>
</FORM>
示例 5: links array. In the following example, the linkGetter function uses the links array to display the value of each link in the current document. The example also defines several links and a button for running linkGetter.

function linkGetter() {
   msgWindow=window.open("","msg","width=400,height=400")
   msgWindow.document.write("links.length is " +
      document.links.length + "<BR>")
   for (var i = 0; i < document.links.length; i++) {
      msgWindow.document.write(document.links[i] + "<BR>")
   }
}
<A HREF="http://home.netscape.com">Netscape Home Page</A>
<A HREF="http://www.catalog.com/fwcfc/">China Adoptions</A>
<A HREF="http://www.supernet.net/~dugbrown/">Bad Dog Chronicles</A>
<A HREF="http://www.best.com/~doghouse/homecnt.shtml">Lab Rescue</A>
<P>
<INPUT TYPE="button" VALUE="Display links"
   onClick="linkGetter()">
示例 6: Refer to Area object with links array. The following code refers to the href property of the first Area object shown in Example 1.

document.links[0].href 示例 7: Area object with onMouseOver and onMouseOut event handlers. The following example displays an image, globe.gif. The image uses an image map that defines areas for the top half and the bottom half of the image. The onMouseOver and onMouseOut event handlers display different status bar messages depending on whether the mouse passes over or leaves the top half or bottom half of the image. The HREF attribute is required when using the onMouseOver and onMouseOut event handlers, but in this example the image does not need a hypertext link, so the HREF attribute executes javascript:void(0), which does nothing.

<MAP NAME="worldMap">
   <AREA NAME="topWorld" COORDS="0,0,50,25" HREF="javascript:void(0)"
      onMouseOver="self.status='You are on top of the world';return true"
      onMouseOut="self.status='You have left the top of the world';return true">
   <AREA NAME="bottomWorld" COORDS="0,25,50,50" HREF="javascript:void(0)"
      onMouseOver="self.status='You are on the bottom of the world';return true"
      onMouseOut="self.status='You have left the bottom of the world';return true">
</MAP>
<IMG SRC="images\globe.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#worldMap">
示例 8: Simulate an Area object's onClick using the HREF attribute. The following example uses an Area object's HREF attribute to execute a JavaScript function. The image displayed, colors.gif, shows two sample colors. The top half of the image is the color antiquewhite, and the bottom half is white. When the user clicks the top or bottom half of the image, the function setBGColor changes the document's background color to the color shown in the image.

<SCRIPT>
function setBGColor(theColor) {
   document.bgColor=theColor
}
</SCRIPT>
Click the color you want for this document's background color
<MAP NAME="colorMap">
   <AREA NAME="topColor" COORDS="0,0,50,25" HREF="javascript:setBGColor('antiquewhite')">
   <AREA NAME="bottomColor" COORDS="0,25,50,50" HREF="javascript:setBGColor('white')">
</MAP>
<IMG SRC="images\colors.gif" ALIGN="top" HEIGHT="50" WIDTH="50" USEMAP="#colorMap">

参看

Anchor, Image, link

属性

hash

A string beginning with a hash mark (#) that specifies an anchor name in the URL.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The hash property specifies a portion of the URL. This property applies to HTTP URLs only.

Be careful using this property. Assume document.links[0] contains:

http://royalairways.com/fish.htm#angel Then document.links[0].hash returns #angel. Assume you have this code:

hash = document.links[0].hash;
document.links[0].hash = hash;
Now, document.links[0].hash returns ##angel.

This behavior may change in a future release.

You can set the hash property at any time, although it is safer to set the href property to change a location. If the hash that you specify cannot be found in the current location, you get an error.

Setting the hash property navigates to the named anchor without reloading the document. This differs from the way a document is loaded when other link properties are set.

See RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the hash.

参看

Link.host, Link.hostname, Link.href, Link.pathname, Link.port, Link.protocol, Link.search

host

A string specifying the server name, subdomain, and domain name.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The host property specifies a portion of a URL. The host property is a substring of the hostname property. The hostname property is the concatenation of the host and port properties, separated by a colon. When the port property is null, the host property is the same as the hostname property.

You can set the host property at any time, although it is safer to set the href property to change a location. If the host that you specify cannot be found in the current location, you get an error.

See Section 3.1 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the hostname and port.

参看

Link.hash, Link.hostname, Link.href, Link.pathname, Link.port, Link.protocol, Link.search

hostname

A string containing the full hostname of the server, including the server name, subdomain, domain, and port number.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The hostname property specifies a portion of a URL. The hostname property is the concatenation of the host and port properties, separated by a colon. When the port property is 80 (the default), the host property is the same as the hostname property.

You can set the hostname property at any time, although it is safer to set the href property to change a location. If the hostname that you specify cannot be found in the current location, you get an error.

See Section 3.1 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the hostname.

参看

Link.host, Link.hash, Link.href, Link.pathname, Link.port, Link.protocol, Link.search

href

A string specifying the entire URL.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The href property specifies the entire URL. Other link object properties are substrings of the href property.

You can set the href property at any time.

See RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the URL.

参看

Link.hash, Link.host, Link.hostname, Link.pathname, Link.port, Link.protocol, Link.search

pathname

A string specifying the URL-path portion of the URL.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The pathname property specifies a portion of the URL. The pathname supplies the details of how the specified resource can be accessed.

You can set the pathname property at any time, although it is safer to set the href property to change a location. If the pathname that you specify cannot be found in the current location, you get an error.

See Section 3.1 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the pathname.

参看

Link.host, Link.hostname, Link.hash, Link.href, Link.port, Link.protocol, Link.search

port

A string specifying the communications port that the server uses.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The port property specifies a portion of the URL. The port property is a substring of the hostname property. The hostname property is the concatenation of the host and port properties, separated by a colon. When the port property is 80 (the default), the host property is the same as the hostname property.

You can set the port property at any time, although it is safer to set the href property to change a location. If the port that you specify cannot be found in the current location, you will get an error. If the port property is not specified, it defaults to 80 on the server.

See Section 3.1 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the port.

参看

Link.host, Link.hostname, Link.hash, Link.href, Link.pathname, Link.protocol, Link.search

protocol

A string specifying the beginning of the URL, up to and including the first colon.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The protocol property specifies a portion of the URL. The protocol indicates the access method of the URL. For example, the value "http:" specifies HyperText Transfer Protocol, and the value "javascript:" specifies JavaScript code.

You can set the protocol property at any time, although it is safer to set the href property to change a location. If the protocol that you specify cannot be found in the current location, you get an error.

The protocol property represents the scheme name of the URL. See Section 2.1 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the protocol.

参看

Link.host, Link.hostname, Link.hash, Link.href, Link.pathname, Link.port, Link.search

search

A string beginning with a question mark that specifies any query information in the URL.

属性源Link
实现版本Navigator 2.0

安全性

Navigator 3.0:该属性默认是带有污点的。有关数据污点的更多信息,请看“JavaScript 的安全性”

描述

The search property specifies a portion of the URL. This property applies to http URLs only.

The search property contains variable and value pairs; each pair is separated by an ampersand. For example, two pairs in a search string could look like the following:

?x=7&y=5 You can set the search property at any time, although it is safer to set the href property to change a location. If the search that you specify cannot be found in the current location, you get an error.

See Section 3.3 of RFC 1738 (http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html) for complete information about the search.

参看

Link.host, Link.hostname, Link.hash, Link.href, Link.pathname, Link.port, Link.protocol

target

A string specifying the name of the window that displays the content of a clicked hypertext link.

属性源Link
实现版本Navigator 2.0

描述

The target property initially reflects the TARGET attribute of the A or AREA tags; however, setting target overrides this attribute.

You can set target using a string, if the string represents a window name. The target property cannot be assigned the value of a JavaScript expression or variable.

You can set the target property at any time.

示例

The following example specifies that responses to the musicInfo form are displayed in the msgWindow window:

document.musicInfo.target="msgWindow"

参看

Form

text

A string containing the content of the corresponding A tag.

属性源Link
实现版本Navigator 4.0

方法

handleEvent

调用指定事件的控制句柄。

方法源Link
实现版本Navigator 4.0

语法

handleEvent(event)

参数

event你想要调用的对象的某一事件控制句柄的名称。

描述

要获得关于事件句柄的更多信息,请看“关于事件的常规信息”


【目录】 【上一页】 【下一页】 【索引】

返回页面顶部