• js之window对象(慕课网学习笔记)


    javaScript定义了一个变量一个函数都会变成window中的一个成员

    var a=1;
    alert(window.a)  //会输出a的值
    

    window基础

    创建窗口、调整窗口、移动窗口、关闭窗口

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Js window</title>
    </head>
    <body>
    	<button onclick="openwindow()">创建窗口</button>
    	<button onclick="myFunction()">调整窗口</button>
    	<button onclick="moveFunction()">移动窗口</button>
    	<button onclick="closeFunction()">关闭窗口</button>
    	
    	<script type="text/javascript">
    		var w;
    		
    		function openwindow(){
    			//创建一个新的窗口
    			//第一个参数为打开窗口显示该连接的内容
    			//加上第一个参数即打开的窗口为非空,myFunction,moveFunction有可能不管用
    			//第二个参数为窗口的名字
    
    			//现在w代表创建的窗口
    			w=window.open('','', 'width=300,height=300');
    			w.focus();
    		}
    
    		function myFunction(){
    			//调整窗口大小为500*500;
    			w.resizeTo(500,500);
    			w.focus();
    		}		
    
    		function moveFunction(){
    			//移动到700*500的位置
    			w.moveTo(700,500);
    			w.focus();
    		}	
    
    		function closeFunction(){
    			//关闭窗口
    			w.close(700,500);
    			w.focus();
    		}
    	</script>
    </body>
    </html>
    

    screen浏览器可用的高度与宽度

    • screen.availWidth - 浏览器可用的屏幕宽度
    • screen.availHeight - 浏览器可用的屏幕高度
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>window screen</title>
    </head>
    <body>
    	<script type="text/javascript">
    		//弹出浏览器可用的宽度
    		alert(screen.availWidth);
    		//弹出浏览器可用的高度
    		alert(screen.availHeight);
    	</script>
    </body>
    </html>
    

    window Location浏览器的地址栏

    • location.hostname返回web主机的域名
    • location.pathname返回当前页面的路径和文件名
    • location.protocol返回所使用的web协议(http:// or https://)
    • location.href返回当前页面的整个URL
      谷歌浏览器F12->console可以输入js代码,将上面代码粘如调试
      在这里插入图片描述

    window history

    • window.history 对象在编写时可不使用 window 这个前缀
    • history.back() - 与在浏览器点击后退按钮相同
    • history.forward() - 与在浏览器中点击按钮向前相同
    • history.go() - 前进到相应的length
      1、history记录我们进入此网站后点击的页面数
      在这里插入图片描述
      在这里插入图片描述
      2、 history.back() - 与在浏览器点击后退按钮相同 像上图由5变为4
      3、history.forward() - 与在浏览器中点击按钮向前相同 由上图会再由4变为5
      4、history.go(-2) 后退到前两页,go(2)前进两页
  • 相关阅读:
    2019-2020-1 20175214 《信息安全系统设计基础》第1周学习总结
    数据结构部分结构截图
    优化算法小结
    排序算法总结
    计算机网络复习总结(三)
    计算机网络复习总结(二)
    计算机网络复习总结(一)
    Spring mvc4 + ActiveMQ 整合
    JAVA中定时任务
    类上带泛型
  • 原文地址:https://www.cnblogs.com/zhangguangxiang/p/14232608.html
Copyright © 2020-2023  润新知