DOM对象和内置对象（中）

最新推荐文章于 2024-03-30 14:31:19 发布

IT界的吉祥物

最新推荐文章于 2024-03-30 14:31:19 发布

阅读量2.4w

点赞数 4

分类专栏： JavaScript 文章标签：浏览器 javascript 基础 history navigator

本文链接：https://blog.csdn.net/hai_qing_xu_kong/article/details/48214617

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

前言

在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window，还有它的一个子对象

document。接下来会介绍它们的一些实用的对象和方法，如：

1、alert()、prompt()和confirm()与用户交互。

2、利用getElementById()选择页面元素。

3、使用innerHTML()访问HTML内容。

4、使用浏览器的history对象。

5、通过navigator对象获得浏览器信息。

6、利用Date对象操作日期和时间。

7、利用Math对象简化计算。

.1 访问浏览器历史纪录

在JavaScript里，浏览器的历史纪录是以window.history对象代表的，它基本上就是访问过的URL列表，我们看

以下范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function goBack(){
            window.history.back();
        }
        function forward(){
            window.history.forward();
        }
    </script>
</head>
<body>
    <input type="button" value="back" οnclick="goBack()"/>
    <input type="button" value="forward" οnclick="forward()"/>
</body>
</html>

以上程序中通过window.history.forward()和window.history.back()实现浏览器的“前进”和“后退”。通过

window.history.forward()前进之前进入百度界面，通过window.history.back()回退到之前的界面。

效果如下：

window.history有个go()方法，它有一个参数是正的或负的整数，可以调到历史纪录列表里的相对位置，如以下范

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function goBack(){
            window.history.back();
        }
        function forward(){
            window.history.forward();
        }
        function go(){
            window.history.go(-1);
        }
    </script>
</head>
<body>
    <input type="button" value="back" οnclick="goBack()"/>
    <input type="button" value="forward" οnclick="forward()"/>
    <input type="button" value="go" οnclick="go()"/>
</body>
</html>

以上程序多加了一个按钮go，点击调用go()方法，在go()方法中使用了window.history.go(-1)方法，说明回退到第一个

按钮，比如上一个页面是hao123主页，当前页面是三个按钮的界面，点击go按钮，传入go()方法-1值，回退到第一个

按钮，同样的如果是正数，如1则表示前进1个页面。

效果如下：

go()方法也可以接受字符串作为参数，作用是找到历史纪录列表里第一个匹配的URL。

.2 使用location对象

location对象包含当前加载页面的URL信息。页面的URL是由多个部分组成的：

[协议]//[主机名]:[端口]/[路径][搜索][hash]

以下是一个URL范例：

http://www.example.com:8080/tools/display.php?section=435#list

location对象的一系列属性包含了URL各个部分的数据，如下表：

location对象的属性
属性	内容
location.href	'http://www.example.com:8080/tools/display.php?section=435#list'
location.protocol	'http:'
location.host	'www.example.com:8080'
location.hostname	'www.example.com'
location.port	'8080'
location..pathname	'/tools/display.php'
location.search	'?section=435'
location.hash	'#list'

2.1 使用location对象导航

利用location对象有两种方式可以帮助用户导航至新页面。

第一种，如以下范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function setHref() {
            location.href='code02.html';
        }
    </script>
</head>
<body>
    <input type="button" value="location" οnclick="setHref()"/>
</body>
</html>

以上代码通过location.href转移到新页面，这里跳转到本地的code02.html页面，code02页面只是显示一个按钮，点击

弹出对话框，原始页面还保留在浏览器的历史纪录里，用户可以利用浏览器的“后退”按钮方便地返回到以前的页面。

效果如下：

第二种，如以下范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function setReplace() {
            location.replace('code02.html');
        }
    </script>
</head>
<body>
    <input type="button" value="replace" οnclick="setReplace()"/>
</body>
</html>

通过location.replace()方法，可以把当前页面从历史纪录列表里删除，也就是无法通过浏览器的“前进”或“后退”，进入

之前的页面。效果如下：

2.2 刷新页面

如果要在浏览器里重新加载当前页面，我们可以使用reload()方法，如以下范例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function showReload(){
           location.reload(true);
        }
    </script>
</head>
<body>
    <input type="button" value="刷新" οnclick="showReload()"/>
</body>
</html>

效果如下：

注意：如果使用没有参数的reload()方法，当浏览器的缓冲里保存了当前页面时，就会加载缓冲的内容。为避免这

种情况的发生，确保从服务器获得页面数据，可以在调用reload()方法时，添加参数true。

.3 浏览器信息：navigator对象

location对象保存了浏览器当前URL的信息，而navigator对象包含了浏览器程序本身的数据。

注意：虽然浏览器的兼容性以及比以前几年好多了，当有时我们还是需要了解用户浏览器的功能，而这时使用

navigator对象几乎就是一个错误的选择，这边只是介绍navigator对象的用法。

范例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        td{
            border: 1px solid greenyellow; padding: 3px 5px;}
    </style>
</head>
<body>
    <script>
        document.write("<table>");
        document.write("<tr/><td>appName</td><td>"+navigator.appName+"</td></tr>");
        document.write("<tr/><td>appCodeName</td><td>"+navigator.appCodeName+"</td></tr>");
        document.write("<tr/><td>appVersion</td><td>"+navigator.appVersion+"</td></tr>");
        document.write("<tr/><td>language</td><td>"+navigator.language+"</td></tr>");
        document.write("<tr/><td>cookieEnabled</td><td>"+navigator.cookieEnabled+"</td></tr>");
        document.write("<tr/><td>cpuClass</td><td>"+navigator.cpuClass+"</td></tr>");
        document.write("<tr/><td>onLine</td><td>"+navigator.onLine+"</td></tr>");
        document.write("<tr/><td>platform</td><td>"+navigator.platform+"</td></tr>");
        document.write("<tr/><td>No of Plugins</td><td>"+navigator.plugins.length+"</td></tr>");
        document.write("</table>");
    </script>
</body>
</html>

效果如下：

-------------------------------------------------------------------------------------------------------------------------------------------------------

转载请注明出处：http://blog.csdn.net/hai_qing_xu_kong/article/details/48214617情绪控