详解JavaScript中Location对象方法replace与assign的差别

作者:admin     字体:[增加 减小]    类型:原创
Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。replace()方法与assign()类似,但replace()方法在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档,replace()方法可能是比assign()方法更好的选择。

Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。replace()方法与assign()类似,但replace()方法在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档,replace()方法可能是比assign()方法更好的选择。否则,“后退”按钮会把浏览器带回到原始文档,而相同的脚本则会再次载入新文档。如果检测到用户的浏览器不支持某些特性来显示功能齐全的版本,可以用location.replace()来载入静态的HTML版本。

除了assign()和replace()方法,Location对象平定义了reload()方法,后者可以让浏览器重新载入当前文档。用于页面跳转时,这两个函数非常用有,尤其是replace,当网站既有电脑版又有手机版时,我们很有必要利用JS来嗅探客户端浏览器,来显示不能的网页,关于这个,请详看本站原创文章网站用手机打开后,自动跳转到手机版的javascript代码

为了说明浏览器跳转到新页面的方法,下面举出实例,必要解释已经在写在代码中了。

<!DOCTYPE html>
<html>
<head>
<title>测试网页跳转</title>
<style>
</style>

</head>
<body>
<script>
window.onload = function() {
    setTimeout(function(){
        window.location = "http://www.popjb.com/cat_1.html";
        location = "http://www.popjb.com/cat_1.html";
        location.href = "http://www.popjb.com/cat_1.html";
        location.assign("http://www.popjb.com/cat_1.html");;
        //上面四个采用的页面跳转效果相同,都可以采用“后退”按钮找回当前页面
        //下面这种方式,不能采用 “后退”按钮找回当前页面
        location.replace("http://www.popjb.com/cat_1.html");
    },10000);  //必须等待10秒后跳转到新页面,否则看不到效果。
}
</script>
</body>
</html>

还可以把相当URL赋给location,它们会相对当前URL进行解析:

location = "cat_3.html";

纯粹的片段标识符是相对URL的一种类型,它不会让浏览器载入新文档,但只会使它滚动到文档的位置。#top标签符是个特殊的例子:如果文档中没有元素的ID是“top”,它会让浏览器跳转到文档开始处。

location = "#top";

Location对象的URL分解属性是可写的,对它们重新赋值会改变URL的位置,并且导致浏览器载入一个新的文档(如果改变的是hash属性,则在当前文档中进行跳转):

location.search = "?page=" + (pagenum+1);  //载入下一个页面