ウィンドウ ロード イベント:
ウィンドウ サイズを調整するスタイル シート、ピクチャ、フラッシュ、および互換性イベントを除く:
window .open() メソッドは、指定された URL に移動するか、新しいブラウザ ウィンドウを開くために使用できます。
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
タイマー:
window.scroll(x, y)
window.scrollTo(x, y): どちらも水平方向と水平方向の位置を変更する同じ使用法です。垂直スクロール バー (必ず存在する必要があります) スクロール バーがページ上にある
window.scrollBy(x, y): スクロール バーの累積スクロール。正の数は下に、負の数は上に移動します window.scrollBy(0, 10) : 100 ミリ秒ごとに呼び出される場合、スクロール バーは 10 ピクセル移動します。
window.getComputedStyle(elem, pseudo-class)
ダイアログ ボックス
スクリプトを実行し、実行スタックを実行するときに、JS 非同期コード (イベント、タイマー、Ajax、リソースの読み込み) に遭遇します。 、エラー) が Web API (タスク キュー) に入れられます。実行スタック内のコードが完了したら、タスク キューに移動して最初のコードを実行します。タスク キューからコードを取得して実行します。 execute it repeatedly (event loop) until the execution in the task queue is completed.
window.history is used to obtain the address URL of the current page and redirect the browser to a new page.
http://www.itcast.cn:80/index.html?name=andy&age=1#link http: communication protocol www.itcast.cn: domain name 80: port index.html: path?name=andy&age=1: parameter #link fragment: anchor point, link
object attribute:
現在の URL の
navigator: ブラウザ設定情報をカプセル化するオブジェクト
window.history オブジェクトにはブラウザの履歴 (URL) コレクションが含まれます
window.screen オブジェクトにはユーザーに関する情報が含まれます
// screen: ディスプレイデバイスの解像度サイズを取得する // フル解像度: screen.widht/height // すべてのクライアント幅と互換性のあるクライアントのタイプを識別する方法 // 大画面、中画面、小画面、超小型画面 // lg md sm xs // テレビ パソコン パッド 電話 //幅 >= 1200 >=992 >= 768 < 768 //タスクバーを削除した後の残りの解像度 // screen.availHeight/availWidth
要素の位置(オフセット)、サイズ等を動的に取得できます。 要素の
は
要素のボーダー サイズや要素サイズなどの
共通属性
を動的に取得します :要素のサイズとスクロール距離を動的に取得します。
共通属性
スクロール バーもありません。スクロールすると、onscroll イベントがトリガーされます。
window.pageXOffset/pageYOffset
document.body/documentElement.scrollLeft/scrollTop
2つの値が同時に値を持つ場合、スクロールバーのローリング距離を見つけます
。 封装一个获取滚动条的滚动距离返回:x:水平滚动条滚动的距离y:垂直滚动条滚动的距离*/function getScrollOffet(){ if(window.pageXOffset){ オブジェクトの return {//{} はキーワードの後にある必要があります。そうでない場合、システムが自動的に追加し、戻り値は未定義になります。 x : window.pageXOffset、 y : window.pageYOffset } }else{//IE8 以下と互換性あり return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop }
。
window.innerWidth/innerHeight
IE8 以前と互換性がありません (注: ここでの幅と高さには、メニュー バー、ツールバー、スクロール バーなどの高さは含まれません) document.documentElement.clientWidth/clientHeight
標準モードのdocument.documentElement.clientWidth/clientHeight
は、どのブラウザでもdocument.body.clientWidth/clientHeight
これは、ブラウザのビューポート サイズを返します。 getViewportOffset()
/*カプセル化は、ブラウザのビューポート サイズの戻り値を返します。 : w :视口的宽度h : 视口的高度*/function getViewportOffset(){ if(window.innerWidth){ 戻る { w : window.innerWidth, h : window.innerHeight } }else{ //IE8 以下のブラウザと互換性あり if(document.compatMode == 'BackCompat'){ // 奇妙なレンダリング モードで { を返す w : document.body.clientWidth, h : document.body.clientHeight } }それ以外{ //標準モード return { w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } }}console.log(document.compatMode); // BackCompat の奇妙なモード //
domElement.getBoundingClientRect()
、 left を含むオブジェクトが返されます
, Attributes such as top, right, and bottom. Left and top represent the X and Y coordinates of the upper left corner of the element. Right and bottom represent the X and Y coordinates of the lower right corner of the element. The height and width 属性は古いバージョンの IE では実装されていません。返される結果はリアルタイムではありません。 '
// ドキュメント内の要素の位置を取得します。 getElementPosition(target){ // BoundingClientRect() メソッドをサポート if(0 && target.getBoundingClientRect){ var pos = target.getBoundingClientRect(); return { // スクロール バーが移動するとき、スクロール バーの位置 x を追加します: pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft), y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop) } } それ以外 { var pos = { 左: 0、 トップ:0 } var _elm = ターゲット; while(target.offsetParent){ if(_elm == target){//初めて左と上を蓄積します pos.left += target.offsetLeft; pos.top += target.offsetTop; }それ以外{ pos.left += target.offsetLeft + target.clientLeft; pos.top += target.offsetTop + target.clientTop; } // ターゲットは target = target.offsetParent を再割り当てします。 } return { x : pos.left, y : pos.top} }}
status bar
window position
of the browser statusとその他の属性