javascript5 BOM中的window对象

最新推荐文章于 2021-12-02 21:10:24 发布

IQ等于猪

最新推荐文章于 2021-12-02 21:10:24 发布

阅读量230

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_41132860/article/details/84828468

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BOM(浏览器对象模型)中有很多对象,可以调用这些对象的方法

window对象

window对象表示浏览器中打开的窗口,是顶层对象，是一个全局对象,所有其他的对象都在它下面,即所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。其中document对象和alert()方法就是window的属性,使用时window.document和window.alert() 一般可省略window

下面介绍window对象的常用属性

以下两个是获取浏览器的净宽和高,随着浏览器的方法和缩小,浏览器中的实际宽和高

window.innerWidth - 浏览器窗口的内部宽度

window.innerHeight - 浏览器窗口的内部高度

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	window.alert("alert方法");
	alert("width : "+window.innerWidth+" heitht : "+window.innerHeight);
</script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

1 弹出框

提示框

alert()方法

确认框

confirm(message) 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框,参数是在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）,如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

输入框

prompt(text,defaultText)方法用于显示可提示用户进行输入的对话框。两个参数均为可选参数,第1个参数,要在对话框中显示的纯文本（而不是 HTML 格式的文本）第2个参数

可以在弹出框中输入文本内容，如果点击确认返回输入框的文本内容，点击取消返回null,可用于二次加密

弹出框示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
 	alert("helloworld");
 	var flag=confirm("你好");
 	alert(flag);
 	var passwd=prompt("请输入密码");
 	alert(passwd);
 	
</script>
<title>弹出框</title>
</head>
<body>

</body>
</html>

2 open方法

window.open("url地址")可以在新的标签页中弹出url中的网页，弹出后之前的网页还会存在

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	window.open("http://www.baidu.com");
</script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

说明:不要混淆方法 Window.open() 与方法 Document.open()，这两者的功能完全不同

3 定时器

setTimeout()

setTimeout(code,millisec)在指定事件之后只执行一次
第1个参数:要调用的函数后要执行的 JavaScript 代码串或者函数名(注意不能有括号,有括号代表立即执行函数),可以是匿名函数,第二个参数:在执行代码前需等待的毫秒数

clearTimeout()

clearTimeout(id_of_settimeout)可以将一个定时器关闭,即取消由 setTimeout() 方法设置的定时器。参数:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    /*  使用匿名函数的写法
	setTimeout(function (){
    	alert("hello");
    },5000);
    */
    
    function func1(){       //定义函数
		alert("hello");
	}
   //setTimeout(func1,3000);//函数作为参数,如果带括号,就会立即执行
	
   var timer=setTimeout(func1,3000);//函数作为参数,不带括号会被认为是代码段
   clearTimeout(timer);          //清除计时器

</script>
<title>定时器</title>
</head>
<body>
	
</body>
</html>

setInterval()

setInterval(code,millisec)按照指定的周期（以毫秒计）来调用函数或计算表达式,该函数会不停地调用函数代码，直到 clearInterval() 被调用或窗口被关闭。setInterval() 返回一个 ID 值,可用作 clearInterval() 方法的参数。

clearInterval()

clearInterval(id_of_setinterval) 关闭定时器可取消由 setInterval() 设置的计时器,参数:由 setInterval() 返回的 ID 值

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">   
    function func1(){       //定义函数
		alert("hello");
	}	
   var timer2= setInterval(func1,3000);//每隔三秒弹一次通知
   clearInterval(timer2);   //取消重复的定时器

</script>
<title>定时器</title>
</head>
<body>
	
</body>
</html>

4 location对象

Location 对象包含有关当前 URL 的信息,是 window 对象的一个部分，可通过 window.location 属性来访问,

location.href

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL

location.href 获取当前浏览器地址栏的url

location.href="url地址" 为该属性设置新的 URL，使浏览器读取并跳转到新的 URL 的内容,在原来页面

location.assign("url地址")

在原来页面加载新的url地址,可回退

location.replace("url地址")

该方法可用一个新文档页面取代当前文档页面,不能回退,replace() 方法不会在 History 对象中生成一个新的记录。

location.reload(force)

方法用于重新加载当前文档.参数可选,如果无参数或者参数是 false，它会用 HTTP 头 If-Modified-Since检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。参数为 true，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

示例:

<html>
<head>
<script type="text/javascript">
    alert(location.href);
	function newpage()
	  {
	  location.assign("http://www.qq.com");
	   //location.href="http://www.baidu.com";
	  //location.replace("http://www.baidu.com");
	  }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newpage()" />

</body>
</html>

说明,href,assign,实现页面跳转时要放到事件中,否则无法实现后退功能(浏览器上没有后退选项),replace方法替换后的网页上没有后退功能

如下直接使用,浏览器上无后退按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">

    alert(location.href);//返回当前url地址
    //location.href="http://www.baidu.com";//跳转网页
    //location.assign("http://www.qq.com");//跳转网页
    //location.replace("http://www.taobao.com");//跳转网页

</script>
<title>Insert title here</title>
</head>
<body>
	<div>hello</div>
</body>
</html>

5 history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。它是 window 对象的一部分，可通过 window.history 属性对其进行访问。

history.back()执行的操作与单击后退按钮执行的操作一样或调用history.go(1)

history.forward()调用该方法的效果等价于点击前进按钮或调用 history.go(1)

history.go(number|URL)该方法可加载历史列表中的某个具体的页面,参数是URL表示是要访问的 URL或 URL 的子串,参数是数字

表示要访问的 URL 在 History 的 URL 列表中的相对位置,如history.go(1)表示前进一步,history.go(-1)表示后退一步

用法示例(并无实际操作,因为不知道要回退到哪个网页):

<html>
<head>
<script type="text/javascript">
function Back()
  {
  history.go(-1)
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="Back()" />

</body>
</html>

说明:现在浏览器大量使用AJAX技术(可实现不刷新页面情况下动态获取数据)，history也存在一些安全问题，所以不建议使用history对象

6 navigator对象

Navigator 对象包含有关浏览器的信息

常用属性:

navigator.appName：浏览器名称；

navigator.appVersion：浏览器版本；

navigator.language：浏览器设置的语言；

navigator.platform：操作系统类型

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
	alert(navigator.platform);
	alert(navigator.language);
	alert(navigator.appVersion);
	alert(navigator.appName);
</script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

说明:浏览器信息都可以被用户修改(fidder软件)，所以不一定能得到正确信息

参考:小猴子视频

http://www.w3school.com.cn

IQ等于猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript5 BOM中的window对象

BOM(浏览器对象模型)中有很多对象,可以调用这些对象的方法目录window对象1 弹出框2 open方法3 定时器4 location对象5 history对象6 navigator对象window对象window对象表示浏览器中打开的窗口,是顶层对象，是一个全局对象,所有其他的对象都在它下面,即所有 JavaScript 全局对象、函数以及变...
复制链接

扫一扫