文章目录
- 前言
- 代码演示及解释
- 使用location.href属性
- 使用location.assign()方法
- 使用location.replace()方法
- 使用window.open()方法
- 使用document.URL方法
- 总结
前言
本章学习的是JavaScript中的跳转页面的几种方法
代码演示及解释
使用location.href属性
可以直接将一个新的URL赋值给location.href属性，即可实现页面跳转
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun4(){
location.href="djh.html";
}
</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>
运行结果：
点击前：
点击后：
使用location.assign()方法
与location.href类似，也可以将一个新的URL作为参数传递给location.assign()方法，实现页面跳转
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun4(){
location.assign("djh.html");
}
</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>
运行结果：
点击前：
点击后：
使用location.replace()方法
与location.assign()方法类似，但不会在浏览器的历史记录中留下当前页面的记录，实现页面跳转
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun4(){
location.replace("djh.html");
}
</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>
运行结果：
点击前：
点击后：
使用window.open()方法
可以在新的浏览器窗口或标签页中打开一个URL，实现页面跳转
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun4(){
window.open("djh.html","点击后","titlebar=0,location=no");
}
</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>
运行结果：
点击前：
点击后：
使用document.URL方法
可以将一个新的URL作为参数传递给document.URL='url’方法，实现页面跳转
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun4(){
document.URL="djh.html"
}
</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>
运行结果：
点击前：
点击后：
总结
| 关键单词 | 作用 |
|---|---|
| assign(url) | 加载一个新的URL，并在浏览器历史记录中生成新的记录。 |
| replace(url) | 加载一个新的URL，并替换当前的历史记录。 |
| href | 可以直接将一个新的URL赋值给location.href属性，即可实现页面跳转 |
| open() | 可以在新的浏览器窗口或标签页中打开一个URL，实现页面跳转 |
| URL | 可以直接将一个新的URL赋值给 document.URL=‘url’ 的方法，即可实现页面跳转 |
