javascript中页面跳转方式

学了这么多,该总结一下这些硬知识了

1.我们最常见到的,用的最多的是window.location.href方式 :

window.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'   //效果同上
location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html' //效果同上

但是我们不仅要知道怎么用,还需要了解什么是location:

            console.log(window.location);
//                hash:""               //设置或返回从井号 (#) 开始的 URL(锚)。
//                host:"localhost"      //设置或返回主机名和当前 URL 的端口号。
//                hostname:"localhost"  //设置或返回当前 URL 的主机名。
//                href:"http://localhost/04interesting/11js/05js-Internet/03pagejump/1.html"                //设置或返回完整的 URL。
//                origin:"http://localhost" //浏览器里面的,俺也不知道是啥?英文意思(起源)
//                pathname:"/04interesting/11js/05js-Internet/03pagejump/1.html"                //设置或返回当前 URL 的路径部分。
//                port:""               //设置或返回当前 URL 的端口号
//                protocol:"http:"      //设置或返回当前 URL 的协议

2.还是location方式window.location.replace(url); 和winodw.location.assign(url);例如:

//            location.href = '2.html'
//            location.assign('2.html');          //可以通过浏览器按钮前后回滚
//            location.replace('2.html')       //不记录历史页面

以上三者的结果都是一样的,但是:
replace()跟assign()方法的区别在于:
replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。
3.self.location=’top.htm’; 和 top.location跳转方式,以下结果都一样,代码如下所示:

location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
self.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
top.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'
self.location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
top.location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'

4.window.open(url)方式也可以进行跳转,代码如下:

window.open('http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html')

5.window.history.back(-1); 跳转方式

    window.history.back(-1);
    window.history.go(-1);      //加载 history 列表中的某个具体页面。
    window.history.forward();   //加载 history 列表中的下一个 URL。不能返回到上一级页面

window.location.href与location.href,self.location.href,location.href都是本页面跳转

更详细的网址:https://my.oschina.net/justdo/blog/118391

你可能感兴趣的:(javascript,js与SEO)