js window属性

约定不等于承诺〃 2021-07-24 11:36 319阅读 0赞

可在script代码域直接写window.属性操作,页面加载会自动执行
    window.location.href="http://www.baidu.com" 页面加载会自动修改地址成百度
    
    window.事件机制   放在js代码域,也会在浏览器加载时自动进行
    	window.onclick=function(){alert("哇啦啦")}     点击浏览器就会执行
    
    **地址栏属性**
    	location
    		window.location.href="url";  通过js动态修改地址栏url，实现网页跳转
    		window.location.reload();	  重新加载页面
    		
    **历史记录属性(浏览器中的栈对象)**
    	history
    		window.history.forward();  历史记录前进
    		window.history.back();	      历史记录后退
    		window.history.go(index);  跳转到指定的历史记录资源,正数前进，负数后退，0相当于刷新页面
    		window.history.length;   获取栈中的页面数量，当向栈中已有页面再次添加新的该页面时，会清空包括已有页面以上的所有页面，再添加页面
    		
    **窗口属性**
    
    window.outerHeight;  //获取窗口的外部高度，包括所有界面元素(如工具栏和滚动条)
    window.outerWidth;	 //获取窗口的外部宽度，包括所有界面元素(如工具栏和滚动条)
    window.innerHeight;	 //获取窗口的内部高度，不包括所有界面元素(如工具栏和滚动条)
    window.innerWidth;   //获取窗口的内部高度，不包括所有界面元素(如工具栏和滚动条)
    window.screenX; 	//返回窗口相对于屏幕的x坐标
    window.ScreenY;		//返回窗口相对于屏幕的y坐标
    
    
    **屏幕属性**
    	screen
    		获取分辨率
    			window.screen.width;	
    			window.screen.height;
    
    		
    **浏览器配置属性**
    	navigator
    		window.navigator.userAgent   //返回和浏览器内核相关的信息
    		
    **主体面板属性(document)**
    
    **滚动条属性**
    window.scrollTo(x坐标,y坐标);   设置页面滚动位置

**浏览器栈图**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

<html>
    	<head>
    		<title>js window属性</title>
    		<meta charset="utf-8"/>
    		<script type="text/javascript">
    			function t1()
    			{ 
    				window.location.href="http://www.baidu.com";
    			}
    			function t2()
    			{ 
    				window.location.reload();
    			}
    			function t3()
    			{ 
    				window.history.forward();
    			}
    			function t4()
    			{ 
    				window.history.back();
    			}
    			function t5()
    			{ 
    				window.history.go(1);
    			}
    			function t6()
    			{ 
    				var x=window.screen.width;
    				var y=window.screen.height;
    				alert(x+":"+y);
    			}
    			function t7(){ 
    				alert(window.navigator.userAgent);
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="测试地址栏" onclick="t1()"/>
    		<input type="button" value="测试刷新页面" onclick="t2()" />
    		<input type="button" value="测试前进" onclick="t3()"/>
    		<input type="button" value="测试后退" onclick="t4()"/>
    		<input type="button" value="测试指定跳转历史页面" onclick="t5()" />
    		<input type="button" value="测试屏幕属性" onclick="t6()" />
    		<input type="button" value="测试配置属性" onclick="t7()"/>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/a39c8f130b5949cc86c89fe02dce0f4a.png