ES6 页面重定向
ES6 页面重定向
重定向是一种将用户和搜索引擎发送到不同URL的方法。页面重定向是一种自动将网页重定向到另一个网页的方法。重定向页面通常位于同一网站上,当然也可以位于不同的网站或服务器上。
JavaScript 页面重定向
window.location和window.location.href
在JavaScript中,你可以使用多种方法将网页重定向到另一个页面。几乎所有方法都与window.location对象相关,它是window对象的属性。它可以用来获取当前的URL地址(网址),并将浏览器重定向到一个新的页面。这两种用法在行为上是一致的。window.location返回一个对象。如果href没有设置,window.location默认使用参数.href.
例子
<!DOCTYPE html> <html> <head> <script> function newLocation() { window.location = "http://www.xyz.com"; } </script> </head> <body> <input type = "button" value = "Go to new location" onclick = "newLocation()"> </body> </html>
location.replace()
另一种最常用的方法是window.location对象的replace()方法,它将用一个新的替换当前文档。在replace()方法中,您可以通过新的URL替换()方法,它将执行http重定向。
下面是语法。
window.location.replace("http://www.abc.com");
location.assign()
location.assign()方法在浏览器窗口中加载新文档.
下面是语法。
window.location.assign("http://www.abc.org");
assign() vs replace()
assign()和replace()方法的区别在于location.replace()方法从document.history中删除当前URL,它无法导航回原始文档。在这种情况下,您不能使用浏览器“后退”按钮。如果要避免这种情况,应该使用location.assign ()方法,因为它在浏览器中加载一个新文档。
location.reload()
location.reload()方法在浏览器窗口中重新加载当前文档。
下面是语法。
window.location.reload("http://www.yahoo.com");
window.navigate()
window.navigate()方法类似于为window.location.href属性。因为它只在internet explorer中可用,所以您应该避免在跨浏览器开发中使用它。
下面是语法
window.navigate("http://www.abc.com");
重定向与搜索引擎优化
如果您想通知搜索引擎(SEO)关于您的URL转发,您应该将rel="canonical"标记添加到您的网站head部分,因为搜索引擎不分析JavaScript来检查重定向。
下面是语法
<link rel = "canonical" href = "http://abc.com/" />