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'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you'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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
