JS中BOM相關知識點總結(必看篇)-js教程-PHP中文網

首頁

web前端

js教程

JS中BOM相關知識點總結(必看篇)

高洛峰

Dec 06, 2016 am 09:52 AM

window物件

ECMAScript是JavaScript的核心，但是如果要在web中使用javascript，那麼BOM(瀏覽器物件模型)才是真正的核心。 BOM提供了許多對象，用於存取瀏覽器的功能，這些功能與任何網頁內容無關。

window物件：BOM的核心物件是window，它表示瀏覽器的一個實例。在瀏覽器中，window物件有雙重角色，它既是透過javascript存取瀏覽器視窗的一個接口，也是ECMAScript規定的Global物件。

因此，所有全域作用域中宣告的變數、函數都會變成window物件的屬性和方法。

<script type="text/javascript">
  var age=26;//这里定义的全局变量和全局函数被自动归在了window对象名下
  function sayAge(){
    console.log(this.age);
  }
  console.log(window.age);//26
  sayAge();//26 相当于window.sayAge()
  window.sayAge();//26
 
  //全局变量和在window对象上直接定义属性的唯一区别：全局变量不能够通过delete操作符删除，而直接在window对象上定义的属性可以
  window.color=&#39;red&#39;;
  delete window.age;
  delete window.color;
  console.log(window.age);//26
  console.log(window.color);//undefined
  </script>

登入後複製

<script type="text/javascript">
    /*
    还要注意：尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未经声明的变量是否存在
     */
    //这会抛出错误，因为oldValue未定义
    var newValue=oldValue;
    //这不会抛出错误，因为是一次属性查询
    var newValue=window.oldValue;
  </script>

登入後複製

視窗關係和框架

如果頁面中包含框架，則每個框架都擁有自己的winframdowes，並且保存在集合中。在frames集合中，可以透過數值索引(從0開始，從左到右，從上到下)或框架名稱來存取對應的window物件。每個window物件都有一個name屬性，其中包含框架的名稱。

可以透過window.frames[0]或window.frames[“topFrame”]來引用上方的框架。不過，最好是使用top，而不是window來引用這些框架。因為，top物件總是指向最高(最外)層的框架，也就是瀏覽器視窗。使用它可以確保在一個框架中正確地存取另一個框架。因為對於一個在框架中寫的任何程式碼來說，其中的window物件指向的都是那個框架的特定實例，而不是最高層的框架。

與top相對的另一個window物件是parent。 parent物件始終指向當前框架的直接上層框架。

與框架有關的最後一個物件是self，它總是指向window。 self和window物件可以互換使用。

在使用框架的情況下，瀏覽器中會存在多個Global物件。在每個框架中定義的全域變數會自動成為框架中window物件的屬性。由於每個window物件都包含原生類型的建構函數，因此每個框架都有一套自己的建構函數，這些建構函數一一對應，但並不相等。

location物件

location物件是一個很特別的對象，因為它既是window物件的屬性，也是document物件的屬性。 window.location和document.location引用的是同一個物件。

location物件的屬性：

JS中BOM相關知識點總結(必看篇)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>查询字符串参数</title>
</head>
<body>
<script type="text/javascript">
    function getQueryStringArgs(){
      //取得查询字符串并去掉开头的问号
      var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        //保存数据对象
        args = {},
        //取得每一项
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        //在for循环中使用
        i = 0,
        len = items.length;
      //逐个将每一项添加到args对象中
      for (i=0; i < len; i++){
        item = items[i].split("=");
        //decodeURIComponent用来解码name和value,因为查询字符串应该是被编码过的
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
 
        if (name.length){
          args[name] = value;
        }
      }
      return args;
    }
    //假设查询字符串是： ?q=javascript&num=10
    var args = getQueryStringArgs();
    alert(args["q"]);   //"javascript"
    alert(args["num"]);  //"10"
    //这样一来，每个查询字符串参数都成了返回对象的属性，极大地方便了对每个参数的访问
</script>
</body>
</html>

登入後複製

使用location物件可以透過很多方式來改變瀏覽器的位置。

其中，最常用的方式是：使用assign()方法並為其傳遞一個URL

location.assign(“http://www.php.cn“)

這樣就可以立即打開新的URL並在瀏覽器的記錄中產生一筆記錄。

同樣的，將location.href和window.location設定為一個URL值,也會以此值呼叫assign()方法。

location.href=”http://www.php.cn”;
window.location=”http://www.php.cn”;

這兩種方式的效果和顯示調用assign()方法效果完全一樣

此外，透過修改location物件的其他屬性也可以改變目前載入的頁面。

JS中BOM相關知識點總結(必看篇)

每次修改location的屬性(hash除外)，頁面都會以新的URL重新載入。修改hash的值會在瀏覽器的歷史記錄中產生一條新的記錄

在url：http://a.com#helloword中的'#helloworld'就是location.hash，改變hash並不會導致頁面刷新，所以可以利用hash值來進行資料傳遞，當然資料容量是有限的。

當透過上述任何一種方法修改URL之後，瀏覽器的歷史記錄中就會產生一條新紀錄，因此透過點擊」後退」按鈕都會導覽到前一個頁面。

我們可以使用replace()方法來停用這種行為。此方法只接受一個參數，即要導航到的URL;結果雖然會導致瀏覽器位置改變，但不會在歷史記錄中產生新紀錄。在呼叫replace()方法後，使用者不能回到前一個頁面。

這個頁面載入到瀏覽器後，瀏覽器就會在1秒鐘後重新導向到www.php.cn。然後，'後退'按鈕將處於停用狀態，如果重新輸入完整的URL，則無法返回範例頁面。

<script type="text/javascript">
    setTimeout(function () {
      location.replace("http://www.php.cn/");
    }, 1000);
  </script>

登入後複製

reload()方法，其作用是重新載入目前顯示的頁面。如果呼叫reload()方法時不傳遞任何參數，頁面就會以最有效的方式重新載入。也就是說，如果頁面自上次請求以來並沒有改變過，頁面就會從瀏覽器快取重新載入。如果要強制從伺服器重新加載，需要給該方法傳遞參數true。

location.reload();//重新載入(有可能從快取中載入)
location.reload(true);//重新載入(從伺服器重新載入)

逾時呼叫和間歇呼叫

javascript是单线程语言，但允许通过设置超时值和间歇值来设定代码在特定时刻执行

超时调用：是在指定的时间过后执行代码

间歇调用：每隔指定的时间就执行一次代码

超时调用：需要使用window对象的setTimeout()方法，接收两个参数：要执行的代码和以毫秒表示的时间。

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定执行。因为，javascript是一个单线程的解释器，因此一定时间内只能执行一段代码。第二个参数表示再过多长时间把当前任务添加到队列中。如果队列是空的，则代码会立刻执行，否则就要等待前面的代码执行完了以后再执行。

调用setTimeout()后，该方法会返回一个数值ID,表示超时调用。要取消未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它即可。

间歇调用：使用setInterval()方法

与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直到间歇调用被取消或者页面被卸载。它接收的参数与setTimeout()方法一样

Demo1

<script type="text/javascript">
    //设置超时调用
    var timeoutId = setTimeout(function() {
      alert("Hello world!");
    }, 1000);
    //取消超时调用
    clearTimeout(timeoutId);
  </script>

登入後複製

Demo2

<script type="text/javascript">
  /*
  使用间歇调用实现
   */
    var num = 0;
    var max = 10;
    var intervalId = null;
    function incrementNumber() {
      num++;
      if (num == max) {
        clearInterval(intervalId);
        alert("Done");
      }
    }
    intervalId = setInterval(incrementNumber, 500);
  </script>

登入後複製

Demo3

   
<script type="text/javascript">
  /*
  使用超时调用来实现
   */
    var num = 0;
    var max = 100;
    function incrementNumber() {
      num++;
      if (num < max) {
        setTimeout(incrementNumber, 500);
      } else {
        alert("Done");
      }
    }
    setTimeout(incrementNumber, 500);
  </script>

登入後複製

在使用超时调用时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自动停止。一般认为，使用超时调用来模拟间歇调用是一种最佳模式。间歇调用一般较少使用，因为后一个间歇调用可能会在前一个间歇调用结束之前启动。

系统对话框

alert()、confirm()和prompt()

<script type="text/javascript">
    alert("Hello world!");
  </script>
 
 
 
<script type="text/javascript">
  /*
  判断用户点击了OK还是Cancel，可以检查confirm()方法返回的布尔值：true表示单击了OK，false表示单击了Cancel或单击了右上角的X按钮。
   */
    if (confirm("Are you sure?")) {
      alert("I&#39;m so glad you&#39;re sure! ");
    } else {
       alert("I&#39;m sorry to hear you&#39;re not sure. ");
    }
  </script>
 
 
 
<script type="text/javascript">
  /*
  prompt()方法用来生成一个"提示"框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显示一个文本输入域，用来输入文本内容。该方法接收两个参数：要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
   */
    var result = prompt("What is your name? ", "");
    if (result !== null) {
     alert("Welcome, " + result);
    }
  </script>

登入後複製

history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页以及每个框架，都有自己的history对象与特定的window对象关联。处于安全方面的考虑，开发人员是无法知道用户浏览过的URL，不过，借助用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退和前进。

使用Go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。该方法接收一个参数：表示向前或者向后跳转的页面数的整数值。负数表示向后跳转(类似单击浏览器的后退按钮)，正数表示向前跳转(类似浏览器的前进按钮)。

//后退一页
    history.go(-1);
    //前进一页
    history.go(1);

登入後複製

也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置–可能后退也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做

//跳转到最近的php.cn
history.go("php.cn");

登入後複製

另外，还可以使用back()和forward()来代替go()方法

//后退一页
    history.back();
    //前进一页
    history.forward();

登入後複製

除此之外，history对象还有一个length属性，保存着历史记录的数量。这个数量包括所有的历史记录，即所有的向后和向前的记录。如果history.length==0，则表示这是用户打开窗口后的第一个页面

history对象不常用，但是在创建自定义的后退和前进按钮，以及检测当前页面是不是用户历史记录的第一个页面时，还是必须使用它。

Demo1

history.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <form>
    <input type="text" id="username">
  </form>
  <input type="button" id="btn" value="按钮" onclick="go()">
  <script type="text/javascript">
    function go(){
      var name=document.getElementById("username").value;
      if(name=="hello"){
        history.go(-1);
      }else{
        alert(&#39;用户名不正确&#39;);
      }
    }
  </script>
</body>
</html>

登入後複製

ceshi.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <a href="history.html" >跳转</a>
</body>
</html>

登入後複製

这里使用history模仿了一个输入用户名之后。跳转到之前页面的例子。

Demo2
history2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <a href="demo.html">跳转</a>
  <input type="button" id="btn" value="前进" onclick="go()">
  <script type="text/javascript">
    function go(){
      history.forward();
    }
  </script>
</body>
</html>

登入後複製

demo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <input type="button" name="" value="回退" id="btn" onclick="fn()">
  <script type="text/javascript">
    function fn(){
      history.back();
    }
  </script>
</body>
</html>

登入後複製

这个小例子模拟了history.back()和history.forward()的基本功能

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

如何使用JS和百度地圖實現地圖多邊形繪製功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地圖實現地圖多邊形繪製功能在現代網頁開發中，地圖應用程式已成為常見的功能之一。而地圖上繪製多邊形，可以幫助我們將特定區域標記，方便使用者進行檢視和分析。本文將介紹如何使用JS和百度地圖API實現地圖多邊形繪製功能，並提供具體的程式碼範例。首先，我們需要引入百度地圖API。可以利用以下程式碼在HTML檔案中導入百度地圖API的JavaScript

See all articles

JS中BOM相關知識點總結(必看篇)

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題