ECMAScriptはJavaScriptのコアですが、WebでJavaScriptを使用する場合、BOM(ブラウザーオブジェクトモデル)が実際のコアです。
BOMのコアオブジェクトはウィンドウで、ブラウザのインスタンスを表します。
ブラウザでは、ウィンドウオブジェクトは、JavaScriptがブラウザウィンドウにアクセスするためのインターフェイスとECMAScriptによって指定されたグローバルオブジェクトの両方です。つまり、Webページで定義されている変数、オブジェクト、および関数は、グローバルオブジェクトとしてウィンドウを取得します。
1。グローバル範囲
ウィンドウオブジェクトはグローバルオブジェクトの役割を再生するため、グローバルスコープで宣言されたすべてのオブジェクト、変数、および関数は、ウィンドウのプロパティと方法になります。
グローバル変数の定義とウィンドウオブジェクトの属性の定義には依然として違いがあります。グローバル変数は削除を介して削除することはできませんが、ウィンドウオブジェクトで定義された属性は問題ありません。
var age = 28; window.color = "red"; // IE <9では、エラーがスローされ、false削除window.ageが他のブラウザで返されます。 // IE <9では、エラーがスローされ、True Delete Window.Colorが他のブラウザーで返されます。 // true alert(window.age)を返します。 // 28アラート(window.color); //未定義
VARステートメントを使用してウィンドウ属性を追加する場合、[[configurable]]という名前のプロパティがあります。このプロパティの値はfalseに設定されているため、この方法で定義されている属性は削除によって削除できません。
未表変数にアクセスしようとするとエラーがスローされますが、ウィンドウオブジェクトを照会することにより、宣言されていない変数が存在するかどうかを知ることができます。
// oldvalueがvar newValue = oldValueを宣言しないため、ここにエラーがスローされます。 //エラーはプロパティクエリであるため、ここにスローされません。 //未定義
実際、ローカルやナビゲーションなどの多くのグローバルJavaScriptオブジェクトは、実際にはウィンドウオブジェクトのプロパティです。
2。ウィンドウの関係とフレームワーク
ページにフレームが含まれている場合、各フレームには独自のウィンドウオブジェクトがあり、フレームコレクションに保存されます。
フレームコレクションでは、数値インデックスまたはフレーム名からアクセスできます。
<html> <head> <title>フレームセット例</title> </head> <フレームセットrows = "160、*"> <フレームsrc = "frame.htm" name = "topframe"> <フレームセットcols = " name = "rightframe"> </frameset> </frameset> </html>
この例では、上記のフレームワークは、window.frames [0]またはwindow.frames ["topframe"]で参照できます。ただし、Top.Frames [0]を使用してフレームワークにアクセスすることをお勧めします。
上部オブジェクトは、常に最高の(外側の)レイヤーフレームワーク、つまりブラウザウィンドウを指します。それを使用すると、別のフレームが1つのフレームで正しくアクセスできるようになります。
上部オブジェクトの反対側の別のウィンドウオブジェクトは親であり、親オブジェクトは常に現在のフレームワークの直接上部フレームワークを指します。
また、常にウィンドウを指している自己オブジェクトもあります。実際、自己と窓は互いに使用できます。自己オブジェクトを導入する目的は、上部および親オブジェクトにのみ対応することです。
これらのオブジェクトはすべてウィンドウのプロパティであり、window.parentまたはwindow.topで使用できます。
3。ウィンドウの場所
ほとんどのブラウザは、スクリーンレフトとスクリーントップを提供します。これらは、画面の左側と上部にそれぞれ窓の位置を表すために使用されます。 FFは、ScreenXおよびScreenyプロパティで同じウィンドウ情報を提供し、Chormeはこれら2つのプロパティも同時にサポートしています。
次のコードを使用して、ブラウザ全体にウィンドウの左と上位の位置を取得します。
var leftpos =(typeof windof.screenleft == "number")?window.screenleft:window.screenx; var toppos =(typeof windof.screentop == "number")?window.screentop:window.screeny;
IEとOperaでは、ScreenLeftとScreentopで、画面の左側と上部からウィンドウオブジェクトで表されるページの可視領域まで距離を保存することは注目に値します。 Chrome、FF、およびSafari、Screeny and Screentopでは、画面全体の座標値を画面に保存します。
最終結果は、クロスブラウザー条件では、ウィンドウの左側と上部の正確な座標値を取得できないことです。
Moveto()およびMoveBy()メソッドを使用して、ウィンドウを新しい位置に正確に移動できます。どちらの方法も2つのパラメーターを受け取ります。 moveto()はx軸とy軸の座標を受信し、moveby()は移動するピクセルを受け取ります。
//画面を左上のMoveto(0,0)に移動します。 // windowを移動して、50pxの移動by(-50,0)で残します。
ただし、これらの2つの方法は、ブラウザによって無効になる場合があります。これらの2つの方法は、最も外側のウィンドウオブジェクトにのみ適用でき、フレームワークには適用されません。
4。ウィンドウサイズ
メインストリームブラウザは、窓のサイズを決定するための4つのプロパティを提供します。
IE9+、Safari、およびFFでは、外側の幅と外側のハイトでは、ブラウザウィンドウ自体のサイズ(フレームワークからアクセスに関係なく)を返しますが、オペラでは、これら2つのプロパティの値は、ページビューコンテナのサイズ(単一のタブウィンドウのサイズ)を表します。内幅と内ハイトは、コンテナ内のページビューのサイズを表します(境界の幅を除く)。ただし、Chromeでは、これらの4つのプロパティはすべて、ブラウザサイズではなくビューポートサイズを表しています。
IE9は、以前にブラウザのウィンドウサイズを取得するための属性を提供しませんでした。ただし、DOMを介したページの視覚領域に関する情報を提供します。
IE、FF、Chrome、Opera、およびSafariで、ページビューポート情報はdocument.documentelement.clientwidthおよびdocument.documentelement.clienthightに保存されます。 IE6では、標準モードで効果的でなければなりません。それが無差別モードの場合、document.body.clientwidthとdocument.body.clienthightを使用して同じ情報を取得する必要があります。 Chromeは、標準モードまたは混合モードを区別しません。
ブラウザウィンドウ自体のサイズを最終的に決定することはできませんが、ページビューポートのサイズを取得できます。
var pagewidth = window.innerwidth、pageheight = window.innerheight; if(typeof pageWidth!= "number"){if(document.comPatMode == "css1compat"){pagewidth = document.documentelement.clientWidth; pageheight = document.documentelement.clientheight; } else {pagewidth = document.body.clientWidth; pageheight = document.body.clientheight; }} alert( "width:" + pageWidth);アラート( "height:" + pageheight);モバイルデバイスの場合、window.innerwidthとwindow.innerhightは、画面上のページ領域のサイズである可視ビューポートを保持します。モバイルIEブラウザは、document.documentlement.clientwidthおよびdocument.documentelement.clienthightを使用して同じ情報を取得する必要があります。
resizeto()とsesizeby()メソッドの両方を使用して、ブラウザウィンドウのサイズを調整できます。どちらの方法も2つのパラメーターを受け取ります。 Resizeto()は、ブラウザウィンドウの新しい幅と新しい高さを受信し、sezizeBy()は、新しいウィンドウと古いウィンドウの幅の違いと高さの違いを受け取ります。
// 100*100 Resizeto(100,100)に調整します。 // 200*150 moveby(100,50)に調整します。
ただし、これらの2つの方法は、ブラウザによって無効になる場合があります。これらの2つの方法は、最も外側のウィンドウオブジェクトにのみ適用でき、フレームワークには適用されません。
5.ウィンドウをナビゲートして開きます
window.open()メソッドは、特定のURLまたは新しいブラウザウィンドウを開くことができます。このメソッドは、URL、ウィンドウターゲット、機能文字列、および新しいページが現在のページを置き換えるかどうかを示すブール値の4つのパラメーターを受信します。
ポップアップ
さまざまなパラメーター
その中で、はい/いいえも1/0を使用できます。 PixelValueは、特定の値、ユニットピクセルです。
パラメーター|値範囲|説明
常に下げられます|はい/いいえ|すべてのウィンドウの後ろにウィンドウが隠されているように指定します
常に|はい/いいえ|すべてのウィンドウに吊り下げられたウィンドウを指定します
依存して|はい/いいえ|親ウィンドウが同時に閉じられているかどうか
ディレクトリ|はい/いいえ| NAV2と3のディレクトリ列は表示されていますか?
高さ|ピクセルバリュー|ウィンドウの高さ
ホットキー|はい/いいえ|メニューバーなしでウィンドウで安全な出口ホットキーを設定します
innerheight | pixelvalue |ウィンドウ内のドキュメントのピクセルの高さ
innerwidth | pixelvalue |ウィンドウ内のドキュメントのpixelwidth
場所|はい/いいえ|ロケーションバーは表示されていますか?
Menubar |はい/いいえ|メニューバーは見えますか?
outerheight | pixelvalue |窓のピクセルの高さを設定します(装飾的な境界を含む)
外側幅|ピクセルバリュー|ウィンドウのピクセル幅を設定します(装飾的な境界を含む)
再配置可能|はい/いいえ|ウィンドウサイズは調整可能ですか?
screenx | pixelvalue |画面の左の境界線までのウィンドウのピクセルの長さ
スクリーン| PixelValue |画面の上の境界までのウィンドウのピクセルの長さ
スクロールバー|はい/いいえ|ウィンドウにスクロールバーがあるかどうか
タイトルバー|はい/いいえ|ウィンドウタイトル列は表示されていますか?
ツールバー|はい/いいえ|ウィンドウツールバーは表示されていますか?
幅| PixelValue |ウィンドウピクセル幅
z-look |はい/いいえ|ウィンドウがアクティブ化された後に他のウィンドウに浮かぶかどうか
例:
window.open( 'page.html'、 'newwindow'、 'height = 100、width = 400、top = 0、left = 0、toolbar = no、no、no、scrollbars = no、no、no、no、no、no、no、status = no')
スクリプトが実行されると、page.htmlは新しい形式のNewWindowで開かれ、幅は100、高さは400、画面の上部から0ピクセル、画面の左側から0ピクセル、ツールバーなし、メニューバーなし、スクロールバーなし、サイズ変更なし、アドレスバー、およびステータスバーなし。
6.断続的なコールとタイムアウトコール
JavaScriptは単一の読み取り言語ですが、タイムアウト値と間隔時間を設定することにより、特定の瞬間にスケジューリングコードの実行を可能にします。前者は指定された時間後にコードを実行し、後者は指定された各時間で1回呼び出されます。
タイムアウトコールsettimeout()
Settimeout()メソッドは2つのパラメーターを受け入れます。最初のパラメーターは関数であり、2番目のパラメーターは時間(マイクロ秒単位)で、数値IDを返します。
setimeout(function(){alert( "hello!");}、1000);Settimeout()を呼び出した後、メソッドは数値IDを返し、タイムアウトコールを示し、タイムアウトコールをキャンセルできます。
var timeoutid = setimeout(function(){alert( "hello!");}、1000); ClearTimeOut(TimeoutID);断続的なコールsetinterval()
setInterval()メソッドは2つのパラメーターを受け入れます。最初のパラメーターは関数、2番目のパラメーターは時間(ユニットマイクロ秒)であり、数値IDを返します
setInterval(function(){alert( "hello!");}、1000);ClearInterval()への呼び出しをキャンセルし、パラメーター間隔コールIDを受け入れる
var intervalid = null; var span = document.createelement( "span"); //スパンノードspan.id = "time"; //スパンID document.body.appendChild(span)を設定します。 //スパン関数を追加IncrementNumber(){var now = new date(); var timestr = now.tolocaletimestring(); span.innertext = timestr; num ++; if(num == 10){clearInterval(intervalid); //時間は10秒後に変化しません}} intervalid = setInterval(incrementNumber、1000);断続的な呼び出しの代わりにタイムアウトコールを使用してみてください
var num = 0; var max = 10; function incrementNumber(){num ++; if(num <max){setimeout(incrementNumber、1000); } else {alert( "ok"); }} setimeout(incrementnumber、1000);7。[システム]ダイアログボックス
警告ボックスalert()
アラート(「ようこそ!」);
情報ボックス確認()にはキャンセルボタンがあります
if(confism( "同意しますか?")){alert( "aseile"); } else {alert( "suntree"); }プロンプト()、ユーザーにテキストを入力するように求めます
var result = prompt( "あなたはあなたの姓を尊重しますか?"、 ""); if(result!== null){alert( "welcome、" +result); }JavaScriptのBOM(ウィンドウオブジェクト)の上記の詳細な説明は、エディターが共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。