windowは、グローバルブラウザに組み込まれた最上位のオブジェクトです
ブラウザーで開かれたウィンドウを表します(ウィンドウオブジェクトに適用されるパブリック標準はありませんが、すべてのブラウザーがオブジェクトをサポートしています)
Windowオブジェクトは、ブラウザウィンドウまたはフレームを表します。
クライアント側JavaScriptでは、Windowオブジェクトはグローバルオブジェクトであり、すべての式は現在の環境で評価されます。
つまり、現在のウィンドウを参照するために特別な構文は必要ありません。そのウィンドウのプロパティをグローバル変数として使用できます。
たとえば、window.documentを記述することなく、ドキュメントのみを書き込むことができます。
同様に、現在のウィンドウオブジェクトのメソッドを関数として使用できます。
上記のプロパティとメソッドに加えて、ウィンドウオブジェクトは、コアJavaScriptによって定義されたすべてのグローバルプロパティとメソッドも実装します。
ウィンドウのさまざまな属性
名前 | ウィンドウ名 |
原点 | 現在のアドレスソース |
innerWidth | ブラウザの幅 |
innerHeight | ブラウザの高さ |
長さ | フレーム数 |
scrollTop | 垂直スクロールバーのスクロールの高さ |
scrollLeft | 水平スクロールバーのスクロールの高さ |
console.log(ウィンドウ)が表示できる:ブラウザのサイズと位置に関するあらゆる種類の一般的なイベント
ウィンドウの下の子オブジェクト
- ロケーション
- window.location.href現在のページのURLを取得および変更できます(ページジャンプ)。
- window.location.hostnameウェブホストのドメイン名
- window.location.pathname現在のページのパスとファイル名
- window.location.port Webホストのポート(80または443)
- window.location.protocolによって使用されるWebプロトコル(http://またはhttps://)
- window.location.searchリクエストパラメータ(コンテンツの背後)
window.location.reload();ページを更新する方法。一般に、キャッシュを使用せずにリフレッシュできるように、reload()にtrue値を渡します。キャッシュされるものは、通常、jsファイル、cssファイルなどです。このようにして、移動できないページを移動できます。現在のページを更新します。
window.location.replace();置換
- ナビゲーター
navigator.userAgentはブラウザ情報を返します(このプロパティを使用して現在のブラウザを特定できます)
現在のブラウザタイプを判別するコード:
1 関数isBrowser(){ 2 var userAgent = navigator.userAgent; 3 // WeChat組み込みブラウザ 4 if(userAgent.match(/ MicroMessenger / i)== 'MicroMessenger' ){ 5 return "MicroMessenger" ; 6 } 7 / / QQ内蔵ブラウザ 8 else if(userAgent.match(/ QQ / i)== 'QQ' ){ 9 return "QQ" ; 10 } 11 // Chrome 12 else if(userAgent.match(/ Chrome / i) == 'Chrome' ){ 13 return "Chrome" ; 14 } 15 // Opera 16 else if(userAgent.match(/ Opera / i)== 'Opera' ){ 17 return "Opera" ; 18 } 19 // Firefox 20 else if(userAgent.match(/ Firefox / i)== 'Firefox' ){ 21 return "Firefox" ; 22 } 23 // Safari 24 else if(userAgent.match(/ Safari / i)== 'Safari' ){ 25 return「サファリ」; 26 } 27 // IE 28 else if(!! window.ActiveXObject || "ActiveXObject" in window){ 29 return "IE" ; 30 } 31 else { 32 return "未定义:" + userAgent; 33 } 34 }
- 歴史
history.go(1)パラメータは任意の整数で書き込むことができ、正の数は前方に移動し、負の数は後方に移動します
history.back()戻る
history.forward()フォワード
- 画面:画面
window.screen.widthは、現在の画面の幅(解像度の値)を返します
window.screen.heightは、現在の画面の高さ(解像度の値)を返します
インターバルタイマーsetInterval // clearInterval
<スクリプト> VAR私は0 = // のsetInterval(「はconsole.log(I ++)」、1000)、一般的にそう//書かれていません // タイマー間隔が電話を取るために、タイマーに関数を // タイミング戻り値は、現在のタイマID(コンピュータランダムに割り当てられた)である VaRのタイマ=たsetInterval(関数(){ にconsole.log(I ++ ) //の各実行タイマので、タイマ内部の最後に書き込まれると判定され idに基づいて(i === 5 ){ // タイマーを停止し、 clearInterval(timer)を停止 } }、 1000 )の場合、すべてを判断する必要があります </ script>
タイムアウトタイマーsetTimeout // clearTimeout
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width、initial-scale = 1.0"> < title> Document </ title> </ head> <body> <button onclick = "fn()">停止定時器</ button> <script> // 3秒之后执行一次var timer = setTimeout(function (){ console.log( 123 ) }、 3000 )関数fn(){ clearTimeout(timer) } </ script> </ body> </ html>
ウィンドウイベント: