20180723- JavaScript-Bom物件-location物件
阿新 • • 發佈：2019-02-15
<!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>