<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Thinking for Fun &#187; href</title>
	<atom:link href="http://jsfox.cn/blog/tag/href/feed" rel="self" type="application/rss+xml" />
	<link>http://jsfox.cn/blog</link>
	<description>网络 ● 生活 ● 技术</description>
	<lastBuildDate>Tue, 01 Jun 2010 01:52:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>获得原始href属性的方法</title>
		<link>http://jsfox.cn/blog/javascript/get-right-href-attribute.html</link>
		<comments>http://jsfox.cn/blog/javascript/get-right-href-attribute.html#comments</comments>
		<pubDate>Sat, 08 Aug 2009 05:35:16 +0000</pubDate>
		<dc:creator>yongbin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[cross-browser]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[href]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://jsfox.cn/blog/?p=141</guid>
		<description><![CDATA[JavaScript里得到某个链接的href属性时，有三种方式，总结一下：
1. 直接获得href属性，也就是
var url = el.href;  // el是一个a元素
2. 使用getAttribute方法，像这样：
var url = el.getAttribute("href");
3. IE下的getAttribute方法有第二个参数，参见msdn的这篇。第二个参数如果是2，意思是以字符串形式返回。
var url = el.getAttribute("href", 2);
获得href属性的这三种方法，同样的，有三点，让人很费解，而且浏览器实现各不相同。

如果href写的是相对地址，得到属性时，浏览器可能会自动转为绝对地址。（很多情况下我们是不希望这样的）
如果href里有汉字，浏览器会自动编码吗？
如果href里有特殊字符，浏览器会自动编码吗？例如大括号{}。

为此我做了一个小测试页面（点这里可测试），得到了如下的结果：



获得href和src属性的浏览器差异（相对地址与自动编码情况）



.href
getAttribute(&#8220;href&#8221;)
getAttribute(&#8220;href&#8221;, 2)


IE6
转绝对，不编码
转绝对，不编码
正常


IE7
转绝对，汉字不编码，特殊符号编码
转绝对，汉字不编码，特殊符号编码
正常


IE8 as IE7
转绝对，汉字不编码，特殊符号编码
转绝对，汉字不编码，特殊符号编码
正常


IE8 standard
转绝对，汉字不编码，特殊符号编码
正常
正常


Firefox 3.0+
转绝对，全部编码
正常
正常


Chrome 2.0
转绝对，全部编码
正常
正常


Safari 4.0
转绝对，汉字编码，特殊符号不编码
正常
正常


Opera 10.0beta
转绝对，汉字编码，特殊符号不编码
正常
正常



其中，“正常”的意思是，得到href属性里原始链接，不自动转绝对地址、汉字和符号都不编码。
结论，如果想得到href里的未经转换、未经编码的原始内容，IE浏览器下全部使用getAttribute(&#8220;href&#8221;, 2)，其他浏览器下使用getAttribute(&#8220;href&#8221;)即可，这在序列化DOM时会非常有用；如果想得到绝对地址、编不编码没关系，那就用href属性。
]]></description>
			<content:encoded><![CDATA[<p>JavaScript里得到某个链接的href属性时，有三种方式，总结一下：</p>
<p>1. 直接获得href属性，也就是</p>
<pre>var url = el.href;  // el是一个a元素</pre>
<p>2. 使用getAttribute方法，像这样：</p>
<pre>var url = el.getAttribute("href");</pre>
<p>3. IE下的getAttribute方法有第二个参数，参见<a title="msdn getAttribute notes" href="http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx" target="_blank">msdn的这篇</a>。第二个参数如果是2，意思是以字符串形式返回。</p>
<pre>var url = el.getAttribute("href", 2);</pre>
<p>获得href属性的这三种方法，同样的，有三点，让人很费解，而且浏览器实现各不相同。</p>
<ol>
<li>如果href写的是相对地址，得到属性时，浏览器可能会自动转为绝对地址。（很多情况下我们是不希望这样的）</li>
<li>如果href里有汉字，浏览器会自动编码吗？</li>
<li>如果href里有特殊字符，浏览器会自动编码吗？例如大括号{}。</li>
</ol>
<p>为此我做了一个小测试页面（<a title="测试获得链接的href属性" href="http://jsfox.cn/blog/test/test_href.html" target="_blank">点这里可测试</a>），得到了如下的结果：<span id="more-141"></span></p>
<table border="0">
<tbody>
<tr>
<th style="font-size:12px" colspan="4">获得href和src属性的浏览器差异（相对地址与自动编码情况）</th>
</tr>
<tr>
<td width="20%"></td>
<td width="25%"><strong>.href</strong></td>
<td width="25%"><strong>getAttribute(&#8220;href&#8221;)</strong></td>
<td width="30%"><strong>getAttribute(&#8220;href&#8221;, 2)</strong></td>
</tr>
<tr>
<td><strong>IE6</strong></td>
<td>转绝对，不编码</td>
<td>转绝对，不编码</td>
<td>正常</td>
</tr>
<tr>
<td><strong>IE7</strong></td>
<td>转绝对，汉字不编码，特殊符号编码</td>
<td>转绝对，汉字不编码，特殊符号编码</td>
<td>正常</td>
</tr>
<tr>
<td><strong>IE8 as IE7</strong></td>
<td>转绝对，汉字不编码，特殊符号编码</td>
<td>转绝对，汉字不编码，特殊符号编码</td>
<td>正常</td>
</tr>
<tr>
<td><strong>IE8 standard</strong></td>
<td>转绝对，汉字不编码，特殊符号编码</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td><strong>Firefox 3.0+</strong></td>
<td>转绝对，全部编码</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td><strong>Chrome 2.0</strong></td>
<td>转绝对，全部编码</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td><strong>Safari 4.0</strong></td>
<td>转绝对，汉字编码，特殊符号不编码</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td><strong>Opera 10.0beta</strong></td>
<td>转绝对，汉字编码，特殊符号不编码</td>
<td>正常</td>
<td>正常</td>
</tr>
</tbody>
</table>
<p>其中，“正常”的意思是，得到href属性里原始链接，不自动转绝对地址、汉字和符号都不编码。</p>
<p>结论，如果想得到href里的未经转换、未经编码的原始内容，IE浏览器下全部使用getAttribute(&#8220;href&#8221;, 2)，其他浏览器下使用getAttribute(&#8220;href&#8221;)即可，这在序列化DOM时会非常有用；如果想得到绝对地址、编不编码没关系，那就用href属性。</p>
]]></content:encoded>
			<wfw:commentRss>http://jsfox.cn/blog/javascript/get-right-href-attribute.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
