ホームページ > 記事 > ウェブフロントエンド > jsでBOMを正しく操作する方法

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

小云云オリジナル: 2018-03-06 16:27:181408ブラウズ

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(&#39;MSIE&#39;)!=-1){
        alert(&#39;我是IE&#39;);
    }else{
        alert(&#39;我不是IE&#39;);
    }

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 = &#39;你所要跳转到的页面&#39;;
2、window.open(&#39;你所要跳转到的页面’);
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>

8019067d09615e43c7904885b5246f0a
    /*
    prompt()方法用来生成一个"提示"框，用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ，还会显示一个文本输入域，用来输入文本内容。该方法接收两个参数：
    要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
     */
        var result = prompt("What is your name? ", "");        if (result !== null) {
         alert("Welcome, " + result);
        }    2cacc6d41bbb37262a98f745aa00fbf0