1. 程式人生 > >20180723- JavaScript-Bom物件-location物件

20180723- JavaScript-Bom物件-location物件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="返回頂部">
	<script>
       //console.log(location.href);
       //console.log(location.hash);
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
	</script>
</body>
</html>

學習目標

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="重新整理" id="reload">
	<script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html';
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
         	 location.reload(true);
         }
	</script>
</body>
</html>

history物件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="box">
		請輸入搜尋關鍵字:
		<input type="text" placeholder="請輸入搜尋關鍵字" id="key">
		<input type="button" value="搜尋" id="search">
	</div>
	<a href="#" id="go">跳轉</a>
	<script>
       // 給按鈕繫結事件
       document.getElementById("search").onclick=function(){
       	  // 獲取搜尋關鍵字並對它進行編碼
       	  var key=encodeURIComponent(document.getElementById("key").value);
       	  // 跳轉到指定頁面
       	  location.href='index9.html?search_key='+key;
       }
       var sea="搜尋";
       document.getElementById("go").href='index.html?key='+encodeURI(sea);
	</script>
</body>
</html>

forward

Navigator物件

Screen

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>screen</title>
</head>
<body>
	<script>
        console.log("頁面寬:"+screen.availWidth);
        console.log("頁面高:"+screen.availHeight);

        console.log("pageWidth:"+window.innerWidth);
        console.log("pageHeight:"+window.innerHeight);
	</script>
</body>
</html>