jsでBOMを正しく操作する方法

1.BOMとは何ですか?

BOM: ブラウザ オブジェクト モデルは、コンテンツから独立したオブジェクト構造を提供し、ブラウザ ウィンドウと対話できます。BOM は複数のオブジェクトで構成され、そのうちのウィンドウ オブジェクトはブラウザを表します。これは BOM の最上位オブジェクトであり、他のオブジェクトはこのオブジェクトのサブオブジェクトです。

2. BOM 知識に関するマインドマップ

3. 主流ブラウザの紹介

ブラウザカーネルとは、主にブラウザのレンダリングエンジンを指します。2013 年以前は、Trident (IE)、Gecko (firefox)、 Webkit (Safari chrome など) と Presto (opera)。 2013 年、Google は Chrome 28 以降に使用される Blink エンジンの開発を開始しました。Opera は自社開発の Presto エンジンを放棄し、Google の傘下に身を投じて、Google と協力してさまざまな国産 Chrome ブラウザを開発しました。 (360、UC、QQ、2345 など) も Webkit を諦め、Blink を採用しました。

モバイル ブラウザ カーネルは、主にシステムの組み込みブラウザのカーネルを指します。

現在、モバイルデバイスのブラウザで一般的に使用されているカーネルには、Webkit、Blink、Trident、Gecko などが含まれます。その中でも、iPhone や iPad などの Apple iOS プラットフォームでは、主に WebKit が使用されています。Android 4.4 より前の Android システムのブラウザ カーネルは、WebKit です。システム ブラウザ ブラウザは Chromium に切り替えられ、カーネルは Webkit のブランチである Blink で、Windows Phone 8 システム ブラウザ カーネルは Trident です。

4. BOM オブジェクト

一般的に使用される BOM オブジェクトは次のとおりです: window オブジェクト、location オブジェクト、Navigator オブジェクト、screen オブジェクト、history オブジェクト

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

• すべての JavaScript グローバル オブジェクト、関数、変数は自動的に window オブジェクトのメンバーになります。

• グローバル変数は、ウィンドウ オブジェクトのプロパティです。

• グローバル関数は、ウィンドウオブジェクトのメソッドです。

ウィンドウオブジェクトの一般的に使用されるメソッドには、

ポップアップクラスのメソッドが含まれます。前面のウィンドウを省略

alert('プロンプトメッセージ')
confirm("確認メッセージ")
prompt("ポップアップ入力ボックス")
open("URLアドレス", "オープニングメソッド(-selfまたは-の可能性があります) black) ", "新しいウィンドウのサイズ") 注: URL が空の場合、デフォルトで空白のページが開きます。開くメソッドが空の場合、ページはデフォルトで新しいウィンドウで開きます。戻り値は次のとおりです: 新しく開いたウィンドウの window オブジェクトを返します

close() 現在の Web ページを閉じます。 注：互換性の問題があります：FF：ブラウザを閉じるようにコードを設定することは禁止されています。

タイマーのサイズ、タイマーをクリアします。

setTimeout (関数、時間) 1回のみ実行

setInterval (関数、時間) 無限実行

clearTimeout/clearInterval (タイマー名) タイマークリア

2)、locationオブジェクト

window.locationオブジェクト:使用 アドレスを取得現在のページの (URL) を入力し、ブラウザを新しいページにリダイレクトします。ウィンドウ接頭辞を使用せずに書くこともできます。

location.herf = 'url address'

hash は、ハッシュを含まない # 記号の後の文字列を返します。それ以外の場合は、空の文字列が返されます。

host はサーバー名とポート番号を返します。

pathname はディレクトリとファイル名を返します。 /project/test.html

検索リターン?数字の後のすべての値。
port は URL に指定されたポート番号を返します。URL にポート番号が含まれていない場合、

portocol はページで使用されるプロトコルを返します。 http: または https:

3)、ナビゲーター オブジェクト

window.navigator オブジェクトには、訪問者のブラウザに関する情報が含まれています。ウィンドウ接頭辞を使用せずに書くこともできます。

navigator.appName: ブラウザ名; navigator.appVersion: ブラウザによって設定された言語; navigator.platform: ブラウザによって設定されたユーザーエージェント文字列。

userAgent は最も一般的に使用される属性であり、ブラウザーの判断を完了するために使用されます。

 if(window.navigator.userAgent.indexOf('MSIE')!=-1){
        alert('我是IE');
    }else{
        alert('我不是IE');
    }

4)、画面オブジェクト

window.screen オブジェクトには、ユーザーの画面に関する情報が含まれています。

screen.availWidth プロパティは、ウィンドウのタスクバーなどのインターフェイス機能を除いた、訪問者の画面の幅をピクセル単位で返します。                                                                                                   

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

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

5）、history对象

window.history 对象包含浏览器的历史。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

history.back() - 加载历史列表中的前一个 URL。返回上一页。

history.forward() - 加载历史列表中的下一个 URL。返回下一页。

go(“参数”) -1表示上一页，1表示下一页。

综合以上，页面跳转的方法有：

1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com")；

五、窗口尺寸与大小

可视区尺寸：

 document.documentElement.clientWidth                                                                                                                             
 document.documentElement.clientHeight

滚动条滚动距离：

document.documentElement.clientScrollTop                                                                                                                         
document.documentElement.clientScrollLeft

存在兼容性问题（Chrome与其它浏览器不同），解决办法如下

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;

内容高/宽：元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离：clientX/clientY

六、系统对话框

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>

相关推荐：

JavaScript的BOM

JS中的BOM应用详解

Js操作BOM对象模型的详细介绍

以上がjsでBOMを正しく操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。