JavaScriptブラウザオブジェクトのサンプルコードの詳細説明

JavaScript はブラウザーが提供する多くのオブジェクトを取得し、それらを操作できます。この記事では、JavaScript でブラウザが提供するさまざまなオブジェクトを取得して操作するための知識を紹介します。

window window オブジェクトは、グローバル スコープとして機能するだけでなく、ブラウザ ウィンドウも表します。

window オブジェクトには innerWidth プロパティと innerHeight プロパティがあり、ブラウザ ウィンドウの内側の幅と高さを取得できます。内部の幅と高さは、メニュー バー、ツールバー、境界線などのプレースホルダー要素を削除した後に Web ページを表示するために使用される正味の幅と高さを指します。

互換性: IE

// 可以调整浏览器窗口大小试试:
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);

これに対応して、ブラウザ ウィンドウ全体の幅と高さを取得できる、outerWidth 属性と externalHeight 属性もあります。

navigator

navigatorオブジェクト

は、ブラウザ情報を表します:

navigator.appName: ブラウザ名。 gator.app バージョン: ブラウザバージョン;
navigator. language: ブラウザーによって設定された言語;
navigator.platform: オペレーティングシステムのタイプ;
navigator.userAgent: ブラウザー文字列によって設定されました。 。

• alert('appName = ' + navigator.appName + '\n' +
     'appVersion = ' + navigator.appVersion + '\n' +
     'language = ' + navigator.language + '\n' +
     'platform = ' + navigator.platform + '\n' +
     'userAgent = ' + navigator.userAgent);

ナビゲーターの情報はユーザーが簡単に変更できるため、JavaScriptで読み取った値が必ずしも正しいとは限りませんのでご了承ください。ブラウザごとに異なるコードを記述するために、多くの初心者はブラウザのバージョンを判断するために if を使用することを好みます。たとえば:

• var width;
  if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
  } else {
    width = window.innerWidth;
  }

  しかし、これにより判断が不正確になるだけでなく、コードの保守が困難になる可能性があります。正しい方法は、存在しないプロパティに対して未定義を返す JavaScript の機能を最大限に活用し、短絡演算子 || を直接使用して計算することです。一般的に使用されるプロパティは次のとおりです。

screen.width: 画面の幅 (ピクセル単位)。

screen.colorDepth: 数値を返します。 8、16、24 などのカラー ビット。

var width = window.innerWidth || document.body.clientWidth;

location

locationオブジェクト

は、現在のページのURL情報を表します。たとえば、完全な URL:

• http://www.example.com:8080/path/index.html?a=1&b=2#TOP

は、location.href を使用して取得できます。 URL の各部分の値を取得するには、次のように記述できます:

• alert('Screen size = ' + screen.width + ' x ' + screen.height);

  新しいページをロードするには、location.assign() を呼び出します。現在のページをリロードしたい場合は、location.reload() メソッドを呼び出すと非常に便利です。

  location.protocol; // 'http'
  location.host; // 'www.example.com'
  location.port; // '8080'
  location.pathname; // '/path/index.html'
  location.search; // '?a=1&b=2'
  location.hash; // 'TOP'

• document

document オブジェクトは現在のページを表します。 HTML はブラウザ上では DOM 形式のツリー構造として表現されるため、ドキュメント オブジェクトは DOM ツリー全体のルート ノードになります。 ドキュメントの title 属性は HTML ドキュメントの b2386ffb911b14667cb8f0f91ea547a7xxx6e916e0f7d1e588d4f442bf645aedb2f から読み込まれますが、動的に変更することができます:

if (confirm('重新加载当前页' + location.href + '?')) {
  location.reload();
} else {
  location.assign('/discuss'); // 设置一个新的URL地址
}

ブラウザ ウィンドウのタイトルの変更を観察してください。

DOM ツリーでノードを見つけるには、ドキュメント オブジェクトから検索を開始する必要があります。最も一般的に使用される検索は、ID とタグ名に基づきます。

最初に HTML データを準備します:

document.title = '努力学习JavaScript!';

ドキュメント オブジェクトによって提供される getElementById() と

getElementsByTagName

() を使用して、ID によって DOM ノードを取得し、タグ名によって DOM ノードのグループを取得します:

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>

Mochaホットモカコーヒーヨーグルト北京古ヨーグルトジュース

絞りたてのリンゴジュース

document オブジェクトには cookie 属性もあり、現在のページの cookie を取得できます。

Cookie は、サーバーによって送信される Key-Value 識別子です。 HTTP プロトコルはステートレスであるため、サーバーはどのユーザーがリクエストを送信したかを区別したい場合、Cookie を使用して区別できます。ユーザーがログインに成功すると、サーバーは user=ABC123XYZ (暗号化された文字列) などの Cookie をブラウザに送信します。その後、ブラウザが Web サイトにアクセスすると、この Cookie がリクエスト ヘッダーに添付され、サーバーは Cookie に基づいてユーザーを識別します。

Cookieは、ページに表示される言語など、Webサイトの一部の設定を保存することもできます。

JavaScript は document.cookie を通じて現在のページの Cookie を読み取ることができます:

var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'

drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + &#39;,&#39;;
}
alert(s);

JavaScript はページの Cookie を読み取ることができ、通常、ユーザーのログイン情報も Cookie に保存されるため、これにより大きなセキュリティ リスクが生じます。サードパーティの JavaScript コードを HTML ページに導入することが許可されているためです:

document.cookie; // 'v=123; remember=true; prefer=zh'

導入されたサードパーティの JavaScript に悪意のあるコードがある場合、www.foo.com Web サイトは www.example.com Web サイトを直接取得します ユーザーログインの情報。

この問題を解決するには、Cookie を設定するときにサーバーで httpOnly を使用できます。httpOnly に設定された Cookie は JavaScript によって読み取られません。この動作はブラウザによって実装されます。すべての主流ブラウザは httpOnly オプションをサポートしており、IE は IE6 SP1 以降でサポートします。

セキュリティを確保するために、サーバーは Cookie を設定するときに常に httpOnly を使用することを要求する必要があります。

history

historyオブジェクトは、JavaScriptはブラウザの履歴オブジェクトのback()またはforward()を呼び出すことができます。これは、ユーザーが「戻る」または「進む」をクリックするのと同じです。ブラウザのボタン。

このオブジェクトは歴史的なレガシー オブジェクトです。最新の Web ページでは、AJAX とページ インタラクションが広範に使用されているため、単純かつ無作法に History.back() を呼び出すとユーザーが非常に怒る可能性があります。

初心者が Web ページのデザインを始めるとき、ログイン ページに正常にログインしたときに、history.back() を呼び出して、ログイン前のページに戻ろうとします。これは間違ったアプローチです。

いかなる状況でも履歴オブジェクトを使用しないでください。

以上がJavaScriptブラウザオブジェクトのサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。