location对象及页面跳转
URL的介绍:
location对象属性:
url整个获取属性为 href; 参数获取属性为 search
代码:
<body>
<button>点击</button>
<button class="btn1">location方法</button>
<div></div>
<script>
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.addEventListener('click', function () {
console.log(location.href)
location.href = 'https://fanyi.baidu.com/?aldtype=16047#en/zh/'
});
var s = 5;
setInterval(fn, 1000);
fn();
function fn() {
if (s == 0) {
location.href = 'https://fanyi.baidu.com/?aldtype=16047#spa/zh/'
} else {
div.innerHTML = ('您将在' + s + '秒后跳转')
s--;
}
}
var btn1 = document.querySelector('.button')
btn1.addEventListener('click', function () {
//location.assign()记录浏览历史记录,所以可以实现后退功能
// location.assign('https://fanyi.baidu.com/?aldtype=16047#en/zh/')
//repalace()替换当前页面,无法记录浏览历史,不能后退
// location.replace('https://fanyi.baidu.com/?aldtype=16047#en/zh/')
//重新加载页面,相当于F5,有参数true时为强制刷新
location.reload(true)
})
</script>
</body>
案例:
两个页面,一个登陆,一个主页,主页可以获取登陆页面的表单参数.
login.html
<body>
<form action="index.html">
用户名:<input type="text" name="username">
<input type="submit" value="登录">
</form>
</body>
index.htm:
<body>
<div></div>
<script>
var div = document.querySelector('div')
console.log(location.search)//?username=pink
//1. 去掉? substr('开始截取的位置下标',截取几个字符)
var uname = location.search.substr('1')
console.log(uname)
//2 用split方法把字符串从=处分隔成数组
var arr = uname.split('=');
console.log(arr) // ['userame','pink']
//3.把数据写入div
div.innerHTML = arr[1] + ',好好学习啊 ';
//split方法
var test = 'asdfasdfsss'
var test1 = test.split('f')
console.log(test1)// ['asd', 'asd', 'sss']
</script>
</body>
浙公网安备 33010602011771号