js history知识点

1.所有浏览器都支持 window 对象。它表示浏览器窗口。

2.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

3.全局变量是 window 对象的属性，全局函数是 window 对象的方法，甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

document.getElementById("header");

4.window的一些方法

    window.open() - 打开新窗口

   window.close() - 关闭当前窗口

   window.moveTo() - 移动当前窗口

   window.resizeTo() - 调整当前窗口的尺寸 

 5.Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

<script>

document.write(location.href);

</script>

6.加载一个新文档

<input type="button" value="加载新文档" onclick="newDoc()"
<script>
function newDoc(){
    window.location.assign("http://www.runoob.com")
}
</script>

7.Window history.back()

     history.back() 方法加载历史列表中的前一个 URL。

<input type="button" value="Back" onclick="goBack()">
<script>
function goBack()
{
    window.history.back()
}
</script>

history forward() 方法加载历史列表中的下一个 URL。

<input type="button" value="Forward" onclick="goForward()">
<script>
function goForward()
{
    window.history.forward()
}
</script>

案例:

打开第二个第三个页面及返回

<input type="button" name="" id="btn1" value="back" />
		<input type="button" name="" id="btn2" value="打开第三个页面" />
		<input type="button" name="" id="btn3" value="forword" />
		<input type="button" name="" id="btn4" value="go" />
		<script>
			btn1.onclick=function(){
				history.back()//返回上一页
			}
			btn2.onclick=function(){
				location.href="demo3.html"
			}
			btn3.onclick=function(){
				history.forward()//跳转到history列表中的下一个页面
			}
			btn4.onclick=function(){
				history.go(1)//跳转到history列表的下一个页面
			}
		</script>

验证消息  onblur方法

<table border="1px" cellspacing="" cellpadding="">
			<tr>
				<td>账户：</td>
				<td>
					<input type="text" name="uname" id="uname" value="" onblur="checkUname()" />
				</td>
				<td>
					<label id="msg1"></label>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" name="pwd1" id="pwd1" value="" onblur="checkPwd()" />
				</td>
				<td>
					<label id="msg2"></label>
				</td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td>
					<input type="password" name="pwd2" id="pwd2" value="" onblur="checkEquals()" />
				</td>
				<td>
					<label id="msg3"></label>
				</td>
			</tr>
			
		<script>
			function checkUname(){
				//实现用户名验证，用户名只能是英文字母,且长度至少6位
				var reg=/^[a-zA-Z]{6,}$/
				//获取文本框的值
				var username=document.getElementById("uname").value
				if(reg.test(username)){
					document.getElementById("msg1").innerHTML="用户名格式正确"
					return true
				}else{
					document.getElementById("msg1").innerHTML="用户名格式不正确"
					return false
				}
			}
			function checkPwd(){
				var reg1=/^[0-9a-zA-Z]{6,}$/
				var pwd1=document.getElementById("pwd1").value
				if(reg1.test(pwd1)){
					document.getElementById("msg2").innerHTML="密码格式正确"
					return true
				}else{
					document.getElementById("msg2").innerHTML="密码格式不正确"
					return false
				}
			}
			function checkEquals(){
				var a=document.getElementById("pwd1").value
				var b=document.getElementById("pwd2").value
				if(a==b){
					document.getElementById("msg3").innerHTML="确认密码与密码一致"
						return true
				}else{
					document.getElementById("msg3").innerHTML="确认密码与密码不一致"
						return false
				}
			}
		</script>