下面来讲一下BOM模型中一个比较重要的对象,那就是location,我们常常使用该对象的reload和href属性动态的实现页面跳转。
先来看一下location对象长什么样子
可以看到,在location对象中包含了一些与请求相关的属性,其中最常用的是reload和href。
一、href 跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象 刷新与跳转</title>
</head>
<body>
<script type="text/javascript">
//使用js控制页面跳转 给location.href重新赋值
location.href = 'http://www.teamczyx.com'; //非常重要
</script>
</body>
</html>
当载入以上代码后,浏览器会自动跳转到http://www.teamczyx.com中。
注意:vscode的内置浏览器不支持跳转,请用谷歌浏览器测试。
二、reload 刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象 刷新与跳转</title>
</head>
<body>
<input type="button" value="刷新" id="btn">
<script type="text/javascript">
document.getElementById('btn').onclick = function(){
location.reload(); //只是刷新页面本身
// location.reload(true); //强制刷新 页面中加载的静态资源文件css/js/图片 也会刷新
}
</script>
</body>
</html>
当点击刷新按钮后页面会刷新。
注意:vscode的内置浏览器不支持BOM刷新,请用谷歌浏览器测试。
以上就是关于location对象的讲解,我们只说了最常用的刷新与跳转操作,其余属性大家可以自己测试一下。
|