JavaScript基础10

JavaScript_10

JavaScript中的BOM对象

    浏览器对象模型--Browser ObjectModel (BOM)

    1.Window 对象

        1.1  属性

          有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

          对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

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

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

          对于 Internet Explorer 8、7、6、5:

          document.documentElement.clientHeight

          document.documentElement.clientWidth

          或者

          document.body.clientHeight

          document.body.clientWidth

          实用的 JavaScript 方案(涵盖所有浏览器):



	
		
		
		
	
	
	

JavaScript基础10_第1张图片

        1.2 方法

         1. open() 方法

          用于打开一个新的浏览器窗口或查找一个已命名的窗口

          格式:window.open(URL,name,features,replace)

URL

一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。

name

一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记

的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。

features

一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。

replace

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。



	
		
		
		
	
	
		

JavaScript基础10_第2张图片

重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()。

         2. close() 方法用于关闭浏览器窗口。

          说明:方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

          只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器



	
		
		
		
	
	
		
	

JavaScript基础10_第3张图片

         3. JavaScript 弹窗方法

          在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

          警告框:window.alert("sometext");

          确认框:window.confirm("sometext");

          当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。

          当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。

          提示框:window.prompt("sometext","defaultvalue");

          当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

          如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

          参数1---提示信息

          参数2---提示框的默认值



	
		
		
		
		
	
	
		

测试确认框


JavaScript基础10_第4张图片

        1.3 子对象

         1. Window Screen--屏幕

          window.screen 对象包含有关用户屏幕的信息。

          1.总宽度和总高度  --- screen.width   /  screen.height

          2.可用宽度和可用高度----screen.availWidth  / screen.availHeight

          3.色彩深度----screen.colorDepth

          4.色彩分辨率----screen.pixelDepth



	
		
		
		
	
	
	

JavaScript基础10_第5张图片

         2. Window Location---页面的地址 (URL)

          对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

          location.href 属性返回当前页面的 URL。

          location.pathname 属性返回 URL 的路径名。

          location.assign() 方法加载新的文档。

          location.search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。



	
		
		
		
	
	
	

实例:



	
		
		用户登录
		
	
	
		

用户登录

用户名:
密码:

JavaScript基础10_第6张图片

     



	
		
		
		
	
	
		

欢迎,登录成功!

 

JavaScript基础10_第7张图片

        3. Window History---历史对象

        4. Window Navigator--浏览器的信息

你可能感兴趣的:(javascript)