ホームページ >ウェブフロントエンド >jsチュートリアル >JS の BOM 関連の知識ポイントのまとめ (必読)

JS の BOM 関連の知識ポイントのまとめ (必読)

高洛峰オリジナル: 2016-12-06 09:52:561045ブラウズ

Window オブジェクト

ECMAScript は JavaScript の中核ですが、Web で JavaScript を使用したい場合は、BOM (Browser Object Model) が本当の中心となります。 BOM は、Web ページのコンテンツから独立したブラウザー機能にアクセスするための多数のオブジェクトを提供します。

window オブジェクト: BOM の中心となるオブジェクトは window であり、ブラウザーのインスタンスを表します。ブラウザでは、ウィンドウオブジェクトは JavaScript を通じてブラウザウィンドウにアクセスするためのインターフェイスであるだけでなく、ECMAScript によって指定されるグローバルオブジェクトとしても機能します。

したがって、グローバルスコープで宣言されたすべての変数と関数は、ウィンドウオブジェクトのプロパティとメソッドになります。

<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>

ウィンドウの関係とフレーム

ページにフレームが含まれている場合、各フレームは独自のウィンドウオブジェクトを持ち、フレームコレクションに保存されます。フレームコレクションでは、対応するウィンドウオブジェクトに数値インデックス (0 から始まり、左から右、上から下) またはフレーム名によってアクセスできます。各ウィンドウオブジェクトには、フレームの名前を含む name 属性があります。

window.frames[0] または window.frames["topFrame"] を通じて上部フレームを参照できます。ただし、これらのフレームを参照するには、ウィンドウの代わりにトップを使用することをお勧めします。一番上のオブジェクトは常に最上位 (最も外側) のフレーム、つまりブラウザーウィンドウを指すためです。これを使用して、あるフレームから別のフレームに正しくアクセスできるようにします。フレームワークで記述されたコードでは、ウィンドウオブジェクトは最上位のフレームワークではなく、そのフレームワークの特定のインスタンスを指すためです。

一番上の反対側にある別のウィンドウオブジェクトが親です。親オブジェクトは常に、現在のフレームのすぐ上のフレームを指します。

フレームに関連する最後のオブジェクトは self で、常にウィンドウを指します。 self オブジェクトと window オブジェクトは互換的に使用できます。

フレームを使用すると、ブラウザーに複数のグローバルオブジェクトが表示されます。各フレームで定義されたグローバル変数は、自動的にフレーム内のウィンドウオブジェクトのプロパティになります。各ウィンドウオブジェクトにはネイティブタイプのコンストラクターが含まれているため、各フレームワークには独自のコンストラクターのセットがあり、それらは互いに対応していますが、等しくありません。

location オブジェクト

location オブジェクトは、ウィンドウオブジェクトとドキュメントオブジェクトの両方の属性であるため、非常に特別なオブジェクトです。 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”;

これら 2 つのメソッドの効果と表示は assign() を呼び出します。メソッド効果は全く同じです

さらに、location オブジェクトの他のプロパティを変更することで、現在ロードされているページを変更することもできます。

JS の BOM 関連の知識ポイントのまとめ (必読)

場所の属性 (ハッシュを除く) を変更するたびに、ページは新しい URL で再読み込みされます。ハッシュ値を変更すると、ブラウザの履歴に新しいレコードが生成されます。URL: http://a.com#helloword は location.hash です。そのため、ハッシュを変更してもページは更新されません。データ転送にはハッシュ値を使用できますが、当然ながらデータ容量には制限があります。

上記のいずれかの方法で URL が変更されると、ブラウザの履歴に新しい記録が生成されるため、「戻る」ボタンをクリックすると前のページに移動します。

replace() メソッドを使用して、この動作を無効にすることができます。このメソッドは、移動先の URL というパラメーターを 1 つだけ受け入れます。その結果、ブラウザーの場所は変更されますが、履歴に新しいレコードは生成されません。 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 までご連絡ください。

前の記事：js 演算の丸めと文字列の分割次の記事：js 演算の丸めと文字列の分割

続きを見る

JS の BOM 関連の知識ポイントのまとめ (必読)

関連記事