美文网首页前端开发程序员
记JS中关于浏览器window的一些操作

记JS中关于浏览器window的一些操作

作者: 相关函数 | 来源:发表于2016-07-31 15:38 被阅读29次

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

window

  • 所有的浏览器都支持windou对象,他表示浏览器的窗口
  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
  • 全局变量是 window 对象的属性。
  • 全局函数是 window 对象的方法。
  • HTML DOM 的 document 也是 window 对象的属性之一

下面的代码显示浏览器窗口的高度和宽度,不包括工具栏/滚动条。

var width =window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height =window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

另外一些操作
window.open() - 打开新窗口
window.close()- 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo()- 调整当前窗口的尺寸

Screen

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Location

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

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.href 返回当前页面的 URL
location.pathname 返回 URL 的路径名
location.assign() 这个方法加载新的文档

History

window.history 对象在编写时可不使用 window 这个前缀。

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

Navigator

window.navigator 对象包含有关访问者浏览器的信息,window.navigator 对象在编写时可不使用 window 这个前缀。

警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

消息框

alert 是警示框、可以使用“\n”来使警示语进行折行。

confirm 是确认框,用于使用户可以验证或者接受某些信息。

prompt("文本","默认值") 是提示框, 第二个引号中的内容是默认值 也就是占位语。

计时事件

计时时间的作用就是我们可以使用js来设定一个经过一段时间之后才执行的事件,而不是调用的时候就直接执行。

在JavaScritp 中使用计时事件有两个关键方法

  • setTimeout("js语句",ms) 未来的某时执行代码,第一个参数是要执行的js代码,第二个参数是以毫秒为单位的时间。
    注:1000ms = 1s。

  • clearTimeout() 取消setTimeout()
    取消计时时间的写法为:

var t = setTimeout("alert("哈哈")",5000);
clearTimeout(t);

Cookies

cookie 用来识别用户。cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{ 
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{ 
c_start=c_start + c_name.length+1 
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
} 
}
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

本文内容学习自W3School,侵删。。。

相关文章

  • 记JS中关于浏览器window的一些操作

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 window 所有的浏览器都支持w...

  • JavaScript基础知识总结(二)

    BOM - 浏览器对象模型 - BOM可以使我们通过js来操作浏览器 - BOM对象 window - 代表的是整...

  • 2019-01-27

    js中的BOM BOM的核心:window对象 bom:浏览器对象模型 window:是浏览器的一个实例,在浏览器...

  • js - 02 JS的组成和变量

    JS的组成 按照相关的js语法,去操作页面中的元素,又是还要操作浏览器中的一些功能 ECMAscript 3/5/...

  • 08-JS基础-BOM相关

    BOM 浏览器对象模型BOM可以使我们通过JS来操作浏览器 BOM对象: Window代表的是整个浏览器的窗口,同...

  • JS中的全局对象、原型与原型链

    一、JS中全局对象与浏览器中的全局对象 JS中默认全局对象是global,而在浏览器的全局对象是window,如w...

  • 每日总结

    每日单词 js中的this 全局this 浏览器宿主的全局环境中,this指的是window对象。 consol...

  • 关于 BOM( BrowserObjectModel ) 的学习

    1、window 对象 1.1 在浏览器中,window对象有双重角色,一是通过js访问浏览器窗口的一个接口,二是...

  • javascript-BOM基础

    BOM部分主要是针对浏览器进行操作window:所有浏览器都支持 window 对象,它表示浏览器窗口window...

  • JavaScript基础学习(二)-命名规范和数据类型

    JS做客户端语言 按照相关的JS语法去操作页面中的元素,有时还要操作浏览器里面的一些功能 ECMAScript3/...

网友评论

  • 1053bd2f9a9a:怎样可以修改Navigator的数据啊?以及怎么解决Navigator 对象信息的误导性呢?

本文标题:记JS中关于浏览器window的一些操作

本文链接:https://www.haomeiwen.com/subject/zmatsttx.html