34-JavaScript-DOM-History-Location-Navigator-Screen-Event

我会带着你远行 2022-09-18 11:57 127阅读 0赞

# 1. History 对象 #

##  **1) 说明** ##

History 对象包含用户（在浏览器窗口中）访问过的 URL。  
History 对象是 window 对象的一部分，  
可通过 window.history 属性对其进行访问.  
由 JS Runtime Engine 自动创建.

##  **2) 属性** ##

**length**   
  
返回浏览器历史列表中的 URL 数量。

##  **3) 方法** ##

**① back()**   
  
加载 history 列表中的前一个 URL。  
果等价于点击后退按钮或调用 history.go(-1)。  
  
 **② forward()**   
  
加载 history 列表中的下一个 URL。  
等价于点击前进按钮或调用 history.go(1)。  
  
 **③ go(number|URL)**   
  
加载 history 列表中的某个具体页面。  
URL : 使用的是要访问的 URL，或 URL 的子串。  
number : 要访问的 URL 在 History 的 URL 列表中的相对位置。

##  4) 示例 ##

1.html

1\_2.html

1\_3.html

# 2. Location 对象 #

##  1) 说明 ##

Location 对象包含有关当前 URL 的信息。  
Location 对象是 Window 对象的一个部分，  
可通过 window.location 属性来访问。  
由 JS Runtime Engine 自动创建.

##  2) 属性  ##

**① href**   
  
是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。  
通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

② hash 设置或返回从井号 (\#) 开始的 URL（锚）。  
③ host 设置或返回主机名和当前 URL 的端口号。  
④ hostname 设置或返回当前 URL 的主机名。  
⑤ pathname 设置或返回当前 URL 的路径部分。  
⑥ port 设置或返回当前 URL 的端口号。  
⑦ protocol 设置或返回当前 URL 的协议。  
⑧ search 设置或返回从问号 (?) 开始的 URL（查询部分）。

##  3) 方法 ##

**① reload(force)**  
  
方法用于重新加载当前文档。  
  
参数force  
\- false, 默认, HTTP头 If-Modified-Since 来检测服务器上的文档是否已改变。  
这与用户单击浏览器的刷新按钮的效果是完全一样的。  
\- true, 无论文档的最后修改日期是什么，  
它都会绕过缓存，从服务器上重新下载该文档。

**② assign(URL)**  
  
可加载一个新的文档

<button οnclick="javascript:location.assign('http://www.baidu.com')">
        location.assign('http://www.baidu.com')
    </button>

**③ replace(newURL)**  
  
可用一个新文档取代当前文档  
不会在 History 对象中生成一个新的纪录。  
当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

**4) 示例**

<html>
    <body>
        
    <button οnclick="javascript:location.reload()">refresh</button>
    <button οnclick="javascript:location.href='http://www.baidu.com'">jump</button>
    
    </body>
    
    <script type="text/javascript">
    
        window.onbeforeunload = function(evt) {
            evt.returnValue = window.confirm("Leave now?");
        }    
    
    </script>
    </html>

# 3. Navigator 对象 #

##  1) 说明 ##

Navigator 对象包含有关浏览器的信息

##  2) 集合 ##

plugins\[\]  
  
示例: (火狐)  
  
console.info( navigator.plugins );

##  3) 属性 ##

![SouthEast][]  
  
① appName  
返回浏览器的名称。  
  
② appVersion  
返回浏览器的平台和版本信息。  
  
③ browserLanguage  
返回当前浏览器的语言。  
  
④ cookieEnabled  
返回指明浏览器中是否启用 cookie 的布尔值。  
  
⑤ cpuClass  
返回浏览器系统的 CPU 等级。  
  
⑥ onLine  
返回指明系统是否处于脱机模式的布尔值。  
  
⑦ platform  
返回运行浏览器的操作系统平台。  
  
⑧ systemLanguage  
返回 OS 使用的默认语言。  
  
⑨ userAgent  
返回由客户机发送服务器的 user-agent 头部的值。  
  
⑩ userLanguage  
返回 OS 的自然语言设置。

##  3) 方法 ##

javaEnabled() 规定浏览器是否启用 Java。

# 4. Screen 对象 #

##  1) 说明 ##

Screen 对象包含有关客户端显示屏幕的信息。  
  
每个 Window 对象的 screen 属性都引用一个 Screen 对象。  
Screen 对象中存放着有关显示浏览器屏幕的信息。  
JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。  
例如，  
一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，  
它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。  
另外，  
JavaScript程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

##  2) 属性 ##

![SouthEast 1][]  
① height 返回显示屏幕的高度。  
② width 返回显示器屏幕的宽度。  
③ availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。  
④ availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

##  3) 示例 ##

# 5. Event #

##  1) 绑定事件 ##

① 直接绑定 <input οnclick="check()">  
  
② 在指定元素上绑定

<input type="button" value="button" id="btn" />
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                alert("123");
            }
        </script>

③ addEventListener / removeEventListener  
  
非IE:  
\[Object\].addEventListener("name\_of\_event", fnHandler, bCapture);  
\[Object\].removeEventListener("name\_of\_event", fnHandler, bCapture);  
  
IE:  
\[Object\].attachEvent("name\_of\_event", fnHandler);  
\[Object\].detachEvent("name\_of\_event", fnHandler);

<button id="btn1">btn1</button>
    <button id="btn2">btn2</button>
    
    <script type="text/javascript">
    
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
    
        function warn() {
            alert("132");
        }
    
        // 绑定
        btn1.addEventListener("click", warn);
        
        // 解绑
        btn2.addEventListener("click", function() {
            btn1.removeEventListener("click", warn);
        });
    
    
    </script>

##  2) 获取事件对象 ##

**① 非IE**  
  
function handler(evt) \{  
// evt  
// <==> arguments\[0\];  
\}  
  
 **② IE**  
  
function handler() \{  
// window.event  
\}  
  
 **③ 综上**  
  
function handler(evt) \{  
evt = evt || window.event;  
\}

##  3) 示例- 在文本框中输入数字, 非数字不能输入 ##

<input type="text" id="txt">
    
    <input type="text" οnkeydοwn="return check(event)">
    
    <script type="text/javascript">
    
        var txt = document.getElementById("txt");
    
        txt.onkeydown = check;
    
        function check(evt) {
    
            evt = evt || window.event;
    
            console.info( evt.keyCode );
    
            var keycode = evt.keyCode;
    
            if ( keycode < 48 || keycode > 57 ) {
                alert("NaN");
                evt.returnValue = false; 
                // 火狐不支持returnValue属性, 可使用第二个文本框
            }
    
        }
    
    
    </script>

[SouthEast]: /images/20220828/c4c292ddbd304a5ab6cfd0d1e9e68242.png
[SouthEast 1]: /images/20220828/e98714c0b73a4b5d89d29a5c6b98f283.png