20180723- JavaScript-Bom对象-location对象

最新推荐文章于 2024-07-27 17:31:46 发布

cutebright00

最新推荐文章于 2024-07-27 17:31:46 发布

阅读量128

点赞数

分类专栏：笔记 JavaScript 文章标签：课堂笔记 BOM JavaScript

本文链接：https://blog.csdn.net/cutebright00/article/details/81174794

版权

笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

<!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>

cutebright00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20180723- JavaScript-Bom对象-location对象

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box1{heig
复制链接

扫一扫

专栏目录