検索

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

Mar 06, 2018 pm 04:27 PM
javascript操作する正しい

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>
    /*
    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 サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。