专业编程基础技术教程

网站首页 > 基础教程 正文

JavaScript Location对象(js location对象方法)

ccvgpt 2024-07-28 12:20:28 基础教程 6 ℃

location 对象

location 对象包含有关当前 URL 的信息。

JavaScript Location对象(js location对象方法)

location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location);
}
function newLocation()
{
window.location="/index.html";
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>

location 对象属性

hash 设置或返回从井号 (#) 开始的 URL(锚)。

host 设置或返回主机名和当前 URL 的端口号。

hostname 设置或返回当前 URL 的主机名。

href 设置或返回完整的 URL。

pathname 设置或返回当前 URL 的路径部分。

port 设置或返回当前 URL 的端口号。

protocol 设置或返回当前 URL 的协议。

search 设置或返回从问号 (?) 开始的 URL(查询部分)。

http://example.com:1234/test/test.htm#part2:

hash: #part2

host:example.com:1234

hostname:example.com

href:http://example.com:1234/test.htm#part2

pathname:/test/test.htm

port:1234

protocol:http:

假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search

search:?f=hdom_loc_search

<script type="text/javascript">
document.write(location.host);
</script>

输出:example.com:1234

location 对象方法

assign() 加载新的文档。

reload() 重新加载当前文档。

replace() 用新的文档替换当前文档。

assign() 方法可加载一个新的文档。

location.assign(URL)

<html>
<head>
<script type="text/javascript">
function newDoc()
{
window.location.assign("http://www.w3school.com.cn");
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()" />
</body>
</html>

reload() 方法用于重新加载当前文档。

location.reload(bool)

参数如果是false则从浏览器的缓存中重载,如果为true则从服务器上重载,默认值为false;

<html>
<head>
<script type="text/javascript">
function reloadPage(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="Reload page" onclick="reloadPage()" />
</body>
</html>

replace() 方法可用一个新文档取代当前文档。

location.replace(newURL)

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前记录。

<html>
<head>
<script type="text/javascript">
function replaceDoc(){
window.location.replace("http://www.w3school.com.cn");
}
</script>
</head>
<body>
<input type="button" value="Replace document" onclick="replaceDoc()" />
</body>
</html>

实例:ThinkPHP框架

<a href='{:U('Circle/circleDetail',array('id'=>$vo['share_id']))}'> <!-- 此种方式会影响页面显示效果 -->
<div class="item item-avatar item-button-right">
<img src="{$vo.head_pic}">
<h2>{$vo.user_name}</h2>
<p>{:friend_date($vo['public_time'])}</p>
<i class=" button button-icon button-outline button-assertive" onclick="setCollection(this, '{$vo.share_id}', '{$user.user_id}')">{$vo.isCollection}</i>
</div>
</a>

代替a链接功能

<div class="item item-avatar item-button-right" onclick="javascript:window.location.href='{:U('Circle/circleDetail',array('id'=>$vo['share_id']))}';">
<img src="{$vo.head_pic}">
<h2>{$vo.user_name}</h2>
<p>{:friend_date($vo['public_time'])}</p>
<i class=" button button-icon button-outline button-assertive" onclick="setCollection(this, '{$vo.share_id}', '{$user.user_id}')">{$vo.isCollection}</i>
</div>

最近发表
标签列表