您的位置：首页 > Web前端 > JavaScript

JavaScript-浏览器对象

2016-01-18 22:39 816 查看
  之前是JavaScript的内置对象，现在是JavaScript的浏览器对象。

  浏览器窗口与网页，网页与网页各组成部分之间存在一种从属关系。

  JavaScript浏览器对象 ——window对象、history对象、location对象、screen对象、navigator对象、popupAlert对象、timing对象、cookies对象

  


  

  一、window对象

      1、Window对象

           window对象是BOM的核心，window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象

          所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

          全局变量是window对象的属性、全局函数是window对象的方法

          甚至HTML DOM的document也是window对象的属性之一

 

      2、window属性

          window.closed - 返回窗口是否已被关闭

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

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

          window.name - 设置或返回窗口的名称

          等等

         

      3、window方法

          window.open() - 打开新窗口         //括号中可以加入很多元素，如window.open("xxx.html","width = 100,height = 100")等等

          window.close() - 关闭当前窗口

          window.alert() - 显示带有一段消息和一个确认按钮的警告框

          window.print() - 打印当前窗口的内容

  二、history对象

          1、history对象

            window.history对象包含浏览器的历史（url）的集合

            history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

          2、history属性

           history.length - 返回浏览器历史浏览列表中的URL数量

          3、history方法

            history.back() - 加载 history 列表中的前一个 URL（与在浏览器点击后退按钮相同）

            history.forward() - 加载 history 列表中的下一个 URL（与在浏览器中点击按钮向前相同）

            history.go() - 加载 history 列表中的某个具体页面（进入历史中的某个页面）

            例如：history.go(-2)相当于点击两次后退的效果

  三、location对象

          1、Location对象：

            window.location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面 

          2、Location对象的属性：

            location.hash - 设置或返回从井号 (#) 开始的 URL（锚）

            location.host - 设置或返回主机名和当前 URL 的端口号

            location.hostname - 返回web主机的域名

            location.pathname - 返回当前页面的路径和文件名

            location.port - 返回web主机的端口

            location.protolco - 返回所使用的web协议（http://或https://）

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

          3、location对象的方法：

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

            location.reload() - 重新加载当前文档

            location.replace() - 用新的文档替换当前文档

  四、screen对象

1、Screen对象

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

 

2、Screen对象属性

  screen.availWidth - 可用屏幕宽度

  screen.availHeight - 可用屏幕高度

  screen.height - 屏幕高度

  Screen.width - 屏幕宽度

例如：

<script>
document.write("可用高度："+screen.availHeight+"可用宽度："+screen.availWidth);
document.write("高度："+screen.height+"宽度："+screen.width);
</script>输出如下：  


  五、popupAlert对象

  可以在 JavaScript 中创建三种消息框：警告框（alert）、确认框（confirm）、提示框（prompt）

  例如：

<script>
alert("是否正确");
confirm("正确");
prompt("是否正确");
</script>
  警告框：

确认框：

 

提示框：


  六、timing计时

1、计时事件通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

2、计时方法

  1）：setInterval() - 间隔指定的毫秒数不停地执行指定代码

           cleanInterval()方法用于停止setInterval()方法执行的函数代码

<p id="pid"></p>
<button onclick="stopInterval()">停止</button> //点击按钮调用stopInterval方法停止setInterval
<script>
var mytime = setInterval(function(){
getTime();
},1000);
function getTime(){
var d = new Date;
var t = d.toLocaleTimeString();
document.getElementById("pid").innerHTML = t;
}
function stopTime(){
clearInterval(mytime);
} //用于停止setInterval()
</script>
输出如下：


          这个方法是自己自动执行



  2）：setTimeout() - 暂停指定的毫秒数后执行指定的代码

           语法：var t = setTimeout("javascript语句",毫秒)

           clearTimeout()方法用于停止执行setTimeout()方法的函数代码

<body onload="ceshi()"> //加载页面后执行ceshi函数
<button onclick="stopCeshi()">停止</button> //点击按钮停止之后停止调用
<script>
var win
function ceshi(){
alert("2秒循环一次"); //2秒弹出来一次
var t = setTimeout(function(){ //自己调用自己
ceshi()
},2000);
}
function stopCeshi(){
clearTimeout(t);
}
</script>
</body>
输出如下：


          这个方式通过自己调用自己，延时执行

          之前的内置对象中，在data日期对象里制作简单时钟用的就是这种方法。


<
9cd1
/span>
六、cookies对象

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

七、navigator对象

      window.navigator 对象包含有关访问者浏览器的信息。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 浏览器 对象
相关文章推荐
新的分享
章节导航