四、JS 进阶--浏览器对象

作者: 焰火青春 | 来源:发表于2018-05-27 14:41 被阅读22次

7、浏览器对象

7.1、window 对象

window对象是BOM的核心，window对象指当前的浏览器窗口

window 对象方法：

image

7.2、JS 计时器

在 JS 中，我们可以设定计时器后来执行代码，而不是函数被调用时立即执行

计时器类型：

一次性计时器：仅在指定的延迟时间后触发一次
间隔性触发计时器：每隔一定时间间隔触发一次

计时器方法：

setTimeout（）：指定延迟时间后来执行代码
clearTimeout（）：取消 setTimeout （）设置
setInterval（）：每隔指定的时间执行代码
clearInterval（）：取消 setInterval（）设置

7.2.1、计时器 setInterval（）

在执行时，从载入页面后每隔指定的时间执行代码

语法：

setInterval(代码,交互时间);

代码：要调用的函数或要执行的代码串
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s = 1000ms）

返回值：

一个可以传递给 clearInterval（）从而取消对“代码”的周期性执行的值

调用函数格式：

// 假设有一个 clock() 函数,每隔 1 s 调用这个函数一次
setInterval('clock()',1000)
或
setInterval(clock,1000)

实例：

以时:分:秒的格式动态显示时间

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>计时器 setInterval</title>
        <script type='text/javascript'>
            var attime;
            function clock()
            {
                var time = new Date();
                attime = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
                document.getElementById('clock').value = attime; // 将attime 的值赋值到 文本上显示
            }
            var i = setInterval(clock,100);   // 每隔 100ms 调用 clock 函数一次
        </script>
    </head>
    <body>
        <form>
            <input type='text' id='clock' size='50' />
        </form>
    </body>
</html>

7.2.2、取消计时器 clearInterval（）

clearInterval（）方法可以取消由 setInterval（）设置的交互时间

语法：

clearInterval(id_of_setInterval);     // id_of_setInterval 是由 setInterval() 返回的 ID 值

实例：

设置一个函数，每隔 100 ms 实时显示当前时间，当点击按钮时，停止时间

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>取消计时器clearInterval</title>
    <script type="text/javascript">
        function clock()
        {
            var time = new Date();
            document.getElementById('clock').value = time;
        }
        var i = setInterval('clock()',100);  // i 为 setInterval 的返回 ID 值

    </script>
</head>
<body>
    <form>
        <input type="text" id="clock"  size="50" />
        <input type="button" value="Stop" onclick="clearInterval(i)" />  <!--调用clearInterval，传入setInterval（）返回 ID -->
    </form>

</body>
</html>

7.2.3、计时器 setTimeout（）

在载入后延迟指定时间去执行一次表达式，仅执行一次

语法：

setTimeout(代码，延迟时间);

代码：要调用或执行的函数或代码串
延迟时间：在执行代码前需要等待的时间，以毫秒为单位（1s = 1000ms ）

实例一：
打开网页3s后，弹出个提示框

<!DOCTYPE HTML>
<html>
    <head>
        <script type='text/javascript'>
            setTimeout('alert('hello')', 3000);
        </script>
    </head>
    <body>   
    </body>
</html>

实例二：

创建一个无穷循环的计数器，编写一个函数调用自身，当点击 start 按钮时，输入域便从 0 开始计数

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>计时器</title>
        <script type="text/javascript">
          var num=0;
          function startCount() {
            document.getElementById('count').value=num;
            num=num+1;        // 自加
            setTimeout("startCount()",1000);  // 1s 后调用函数 startCount
          }
        // 因为没有结束条件，因此一直执行
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="count" />
            <input type="button" value="start" onclick="startCount()" />
        </form>
    </body>
</html>

7.2.4、取消计时器 clearTimeout（）

setTimeout（）与 clearTimeout（）一起使用

语法：

clearTimeout(id_of_setTimeout);

实例：

创建一个无穷循环的计数器，点击 start 时开始，点击 stop 时结束

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>计时器</title>

        <script type="text/javascript">
          var num=0;
          var i;
          function startCount(){             // 开始函数
            document.getElementById('count').value=num;
            num=num+1;
            i=setTimeout("startCount()",1000);
          }
          function stopCount(){            // 结束函数
            clearTimeout(i);     // i 为 id_of_setTimeout 的返回 ID 值
          }
        </script>
    </head>
    <body>
      <form>
        <input type="text" id="count" />
        <input type="button" value="Start" onclick="startCount()" />
        <input type="button" value="Stop" onclick="stopCount()"   />
      </form>
    </body>
</html>

7.3、History 对象

history 对象记录了用户曾经浏览过的页面（URL），并可以实现浏览器前进与后退相似导航的功能

在窗口被打开的那一刻开始记录，每个浏览器窗口，每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联

语法：

window.history.[属性 | 方法];

history 对象属性：

length：返回浏览器历史记录列表中的 URL 数量

history 对象方法：

back（）：加载 history 列表中的前一个 URL
forward（）：加载 history 列表中的下一个 URL
go（）：加载 history 列表中的某个具体页面

实例：

返回当前窗口的浏览历史总长度

<script type='text/javascript'>
    var HL = window.history.length;
    documnet.write(HL);
</script>

7.3.1、返回前一个浏览的页面

back（）方法，加载 history 列表中的前一个 URL

语法：

window.history.back();   // 等同于点击浏览器的倒退按钮
// 相当于
window.history.go(-1);

语法：

利用 HTML 的 a 标签内链接（name 属性），当点击链接时链接到相应锚点，点击函数 Goback（）返回前一个记录

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
        function GoBack() {
            window.history.back();    
        }
       
</script>
</head>
<body>
点击下面的锚点链接，添加历史列表项:    
    <br />
    <p>
        <a href="#target1">第1个锚点</a>
        <br />
        <a href="#target2">第2个锚点</a>
        <br />
        <a href="#target3">第3个锚点</a>
        <br />
        <a href="#target4">第4个锚点</a>
        <br />
        <a href="#target5">第5个锚点</a>
        <br />
        <a href="#target6">第6个锚点</a>
    </p>
    
    <h2><a name="target1">章节1</a></h2>
    <p>这是章节1</p>
    <br />

    <h2><a name="target2">章节2</a></h2>
    <p>这是章节2</p>
    <br />

    <h2><a name="target3">章节3</a></h2>
    <p>这是章节3</p>
    <br />

    <h2><a name="target4">章节4</a></h2>
    <p>这是章节4</p>
    <br />

    <h2><a name="target5">章节5</a></h2>
    <p>这是章节5</p>
    <br />

    <h2><a name="target6">章节6</a></h2>
    <p>这是章节6</p>
    <br />

    <br /><br />
    使用下面按钮，实现返回前一个页面:
    <form>
       <input type="button"  value="返回前一个页面" onclick="GoBack();" />        
    </form>
</body>
</html>

7.3.2、返回下一个浏览的页面

forward（）方法，加载 history 列表中的下一个 URL

语法：

window.history.forward();   // 相当于浏览器的前进按钮
// 相当于
window.history.go(1);

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
        function GoForward() {
            window.history.forward();    
        }
</script>
</head>
 

<body>
点击下面的锚点链接，添加历史列表项:    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回下一个页面:
    <form>
       <input type="button"  value="返回下一个页面" onclick="GoForward()" />        
    </form>
</body>
</html>

7.3.3、返回浏览器历史的其他页面

go（）方法，根据当前所处的页面，加载 history 列表中的某个具体的页面

语法：

window.history.go(number);

参数：

1：前一个，go（1）= forward（）
0：当前页面
其他数值：要访问的 URL 在 history 的 URL 列表中的相对位置

实例：

点击返回前一个页面，返回到 #target1，点击返回下一个页面，返回到 # target2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
 <script type="text/javascript">
        function GoBack() {
        window.history.go(-1);    
        }

        function GoForward() {
        window.history.go(1);    
        }
    </script>

<body>
    点击下面的锚点链接，添加历史列表项:    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回前或下一个页面:
    <form>
       <input type="button"  value="返回前一个页面" onclick="GoBack();" />
       <input type="button"  value="返回下一个页面" onclick="GoForward();" /> 
    </form>
</body>
</html>

7.3.4、使用 history 对象实现几个页面之间跳转

back.html

<!DOCTYPE html>
<html>
<head>
    <title>back方法</title>
    <script type="text/javascript">
        function fun1()
        {
            window.history.forward();
        }
    </script>
</head>
<body>
    <form>
        <a href="forward.html">forward</a>
        <input type="button" value="前进" onclick="fun1()">
    </form>

</body>
</html>

forward.html

<!DOCTYPE html>
<html>
<head>
    <title>forward方法</title>
    <script type="text/javascript">
        function fun1()
        {
            window.history.back();
        }
        function fun2()
        {
            window.history.forward();
        }
    </script>
</head>
<body>
    <form>
        <a href="back.html">back</a>  <br />
        <a href="go.html">go</a>
        <input type="button" value="后退" onclick="fun1()"> <br />
        <input type="button" value="前进" onclick="fun2()">
    </form>

</body>
</html>

go.html

<!DOCTYPE html>
<html>
<head>
    <title>go方法</title>
    <script type="text/javascript">
        function fun1()
        {
            window.history.go(-1);
        }
        function fun2()
        {
            window.history.go(-2);
        }
    </script>
</head>
<body>
    <form>
        
        <input type="button" value="后退一个" onclick="fun1()"> <br />
        <input type="button" value="后退二个" onclick="fun2()">
    </form>

</body>
</html>

7.4、location 对象

location 用于获取设置窗体的 URL，并且可以用于解析 URL

语法：

location.[属性 | 方法]
window.location.href = 'http://www.imooc.com'          // 打开慕课网

location 对象属性图示：

image

location 对象属性：

属性	描述
hash	设置或返回从 # 号开始的 URL （锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
pathname	设置或返回当前 URL 的路径部分
protocol	设置或返回当前 URL 的协议
href	设置或返回完整当前 URL
port	设置或返回当前 URL 的端口号
search	设置或返回从问号（？）开始的 URL （查询部分）

location 对象方法：

属性	描述
assign（）	加载新的文档
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

实例：

 <script type="text/javascript">
    document.write('URL: ' + location.href + '<br/>');    
    document.write('hash: ' + location.hash + '<br/>');
    document.write('hostname: ' + location.hostname + '<br/>');
    document.write('pathname:' + location.pathname + '<br/>');
    document.write('port: ' + location.port + '<br/>');
    document.write('protocol: ' + location.protocol + '<br/>');
 </script>
-------------

URL: https://www.imooc.com/code/1153
hash: 
hostname: www.imooc.com
pathname:/code/1153
port: 
protocol: https:

7.5、navigator 对象

navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

对象属性：

属性	描述
appCodeName	浏览器代码名的字符串表示
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的 user agent 头部的值

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
    var brower_code_name = navigator.appCodeName;
    var brower_name = navigator.appName;
    var brower_version = navigator.appVersion;
    var brower_platform = navigator.platform;
    var brower_agent = navigator.userAgent;
    document.write('brower_code_name: ' + brower_code_name + "<br />" + '<br/>');
    document.write('brower_name: ' + brower_name + "<br />"+ '<br/>');
    document.write('brower_version: ' + brower_version + "<br />"+ '<br/>');
    document.write('brower_platform: ' + brower_platform + "<br />"+ '<br/>');
    document.write('brower_agent: ' + brower_agent);
</script>
<body>
</body>
</html>
------

brower_code_name: Mozilla

brower_name: Netscape

brower_version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

brower_platform: Win32

brower_agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

7.5.1、userAgent

返回用户代理的字符串表示（即包含浏览器版本信息等的字符串）

语法：

navigator.userAgent;

几种浏览器的 user_agent，360 的兼容模式用的是 IE ，极速模式用的是 Chrome 内核

image

实例：

使用 userAgent 判断用的是什么浏览器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
  function validB(){ 
    var u_agent = navigator.userAgent; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器"  onclick="validB()" >
  </form>
</body>
</html>
-----------

浏览器:Chrome
u_agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

7.6、screen 对象

screen 对象用于获取用户的屏幕信息

语法：

window.screen.属性;

screen 对象属性：

availHeight：窗口可以使用的屏幕高度，单位像素
availWidth：窗口可以使用的屏幕宽度，单位像素
colorDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）
pixelDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）（IE 不支持此属性）
height：屏幕的高度，单位像素
width：屏幕的宽度，单位像素

7.6.1、屏幕分辨率的高和宽

height 和 width 分别可以获取屏幕的分辨率高和宽

单位以像素计
window 这个前缀可以省略

实例：

<script type="text/javascript">
document.write( "屏幕宽度：" + screen.width + 'px' + '<br/>');
document.write( "屏幕高度：" + screen.height + 'px');       
</script>
----

屏幕宽度：1366px
屏幕高度：768px

7.6.2、屏幕可用高和宽

screen.availWidth：属性返回访问者屏幕的宽度，以像素计，减去界面特性，如任务栏
screen.availHeight：属性返回访问者屏幕的高度，以像素计，减去界面特性，如任务栏

不同浏览器的任务栏默认高度不一样，位置也不一样，所以高和宽可能也不一样

实例：

chrome、win 10

<script type="text/javascript">
    document.write("可用宽度：" + screen.availWidth + 'px' + '<br/>' );
    document.write("可用高度：" + screen.availHeight + 'px'  );     
</script>
----

可用宽度：1366px
可用高度：728px

7.7、课程练习

制作一个跳转页面，不作任何操作 5 s 后跳转到另外一个页面，点击返回到前一个页面

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
  <h2>操作成功</h2>
  <p>
    <b id="second">5</b>秒后回到主页&nbsp;<a href="javascript:window.history.back()">返回</a>
  </p>
  
  <script type="text/javascript">  
 
   //获取显示秒数的元素，通过定时器来更改秒数。

   //通过window的location和history对象来控制网页的跳转。
   
  var sec = document.getElementById("second");  // 获取元素 second 的对象
  var i = 5;
  function clock()
  {
    
    i--;
    sec.innerHTML = i;      // 替换 b 标签内的内容
    if(i==1)         // 当秒数显示为 1 时，跳转
    {
      window.location.href = 'http://www.imooc.com';
    }
  }
  setInterval("clock()",1000);
 </script>
</body>
</html>

四、JS 进阶--浏览器对象

7、浏览器对象

7.1、window 对象

7.2、JS 计时器

7.2.1、计时器 setInterval（）

7.2.2、取消计时器 clearInterval（）

7.2.3、计时器 setTimeout（）

7.2.4、取消计时器 clearTimeout（）

7.3、History 对象

7.3.1、返回前一个浏览的页面

7.3.2、返回下一个浏览的页面

7.3.3、返回浏览器历史的其他页面

7.3.4、使用 history 对象实现几个页面之间跳转

7.4、location 对象

7.5、navigator 对象

7.5.1、userAgent

7.6、screen 对象

7.6.1、屏幕分辨率的高和宽

7.6.2、屏幕可用高和宽

7.7、课程练习

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程