JavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?

青灯夜游

Nov 13, 2018 am 11:10 AM

javascript

この記事の内容は、JavaScript における Window オブジェクトと Navigator オブジェクトとは何かを紹介することです。困っている友人は参考にしていただければ幸いです。 [おすすめの関連ビデオチュートリアル: JavaScript チュートリアル ]

1. ウィンドウオブジェクト

1 , Window オブジェクトのプロパティ

(1) Closed: ウィンドウが閉じられているかどうかを返します。

nbsp;html>


<meta>
<script>
    var myTestWindowdow;
    function openTestWindow(){
        myTestWindowdow=window.open("","","width=200,height=100");
    }
    function closeTestWindow(){
        if (myTestWindowdow){
            myTestWindowdow.close();
        }
    }
    function checkTestWindow(){
        if (!myTestWindowdow){
            document.getElementById("msg").innerHTML="测试窗口没有被打开!";
        }
        else{
            if (myTestWindowdow.closed){
                document.getElementById("msg").innerHTML="测试窗口被关闭!";
            }
            else{
                document.getElementById("msg").innerHTML="测试窗口没有被关闭!";
            }
        }    
    }
</script>


    <input><br>
    <input><br>
    <input><br>
    <div></div>

(2) defaultStatus: ウィンドウのステータスバーのデフォルトのテキストを設定または返します。

status: ウィンドウのステータスバーのテキストを設定または返します。

nbsp;html>


<meta>
<script>
    //设置默认状态栏文本
    window.defaultStatus="我会显示在浏览器的状态栏中! !";
    //设置状态栏文本
    //window.status="我会显示在浏览器的状态栏中! !";
</script>

(3) frames: ウィンドウ内のすべての名前付きフレームを返します。コレクションは Window オブジェクトの配列であり、各オブジェクトにはウィンドウ内のフレームが含まれます。

nbsp;html>


<meta>
<script>
    function changeAllframe() {
    var frames = window.frames;
    var i;

    for (i = 0; i < frames.length; i++) {
        frames[i].location = "https://www.baidu.com";
    }
}
</script>


    <button>点我</button><br>
    <iframe></iframe>
    <iframe></iframe>
    <iframe></iframe>

(4) innerHeight: ウィンドウのドキュメント表示領域の高さを返します。

innerWidth: ウィンドウのドキュメント表示領域の幅を返します。

nbsp;html>


<meta>
<script>
    function getWidthAndHeight(){
        var w=window.innerWidth;
        var h=window.innerHeight;
        x=document.getElementById("myInfo");
        x.innerHTML="Width: " + w + " Heigth: " + h;
    }
</script>


    <button>获取innerWidth,innerHeight</button><br>
    <div></div>

(5) localStorage: データを長期間保存するために使用されます。保存されたデータには、手動で削除するまで有効期限がありません。

nbsp;html>


<meta>
<script>
    function getClickCount() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.clickcount) {
                localStorage.clickcount = Number(localStorage.clickcount)+1;
            } else {
                localStorage.clickcount = 1;
            }
            document.getElementById("myInfo").innerHTML = "你已经点击了 " + localStorage.clickcount + " 次。";
        } else {
            document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>


    <button>点击</button><br>
    <div></div>

ブラウザがサポートしていない場合:

ブラウザがサポートしている場合:

(6 ) length: 現在のウィンドウ内のフレーム数を返します。

nbsp;html>


<meta>
<script>
    function getframeCount() {
        document.getElementById("myInfo").innerHTML = "有frame " + frames.length + " 个。";
    }
</script>


    <button>点击</button><br>
    <div></div>
    <iframe></iframe>
    <iframe></iframe>
    <iframe></iframe>

(7) name: ウィンドウの名前を設定または返します。

nbsp;html>


<meta>
<script>
var myWindow;
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;myTestWindow&#39;,&#39;width=200,height=100&#39;);
        myWindow.document.write("<p>窗口名称为: " + myWindow.name + "");
    }
</script>


    <button>点击</button><br>

(8) opener: ウィンドウを作成した Window オブジェクトへの参照を返します。 window.open() を使用してウィンドウを開く場合、このプロパティを使用して、ターゲットウィンドウのソース (親) ウィンドウから詳細を返すことができます。

nbsp;html>


<meta>
<script>
    function openNewWindow(){
        myNewWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;);
        myNewWindow.document.write("这是我新打开的窗口");
        myNewWindow.focus();
        myNewWindow.opener.document.write("这个是源窗口");
    }
</script>


    <button>点击</button><br>

(9) outerHeight: ツールバーやスクロールバーを含むウィンドウの外側の高さを返します。

externalWidth: ツールバーやスクロールバーを含むウィンドウの外側の幅を返します。

pageXOffset: ウィンドウ表示領域の左上隅を基準とした現在のページの X 位置を設定または返します。

pageYOffset: ウィンドウ表示領域の左上隅を基準とした現在のページの Y 位置を設定または返します。

nbsp;html>


<meta>
<script>
    function getWidthAndHeight(){
        var ow=window.outerWidth;
        var oh=window.outerHeight;
        var pX=window.pageXOffset;
        var pY=window.pageYOffset;
        x=document.getElementById("myInfo");
        x.innerHTML+="outerWidth: " + ow + " outerHeigth: " + oh+"<br/>";
        x.innerHTML+="pageXOffset: " + pX + " pageYOffset: " + pY+"<br/>";
    }
</script>


    <button>获取</button><br>
    <div></div>

(10) parent: 親ウィンドウに戻ります。

nbsp;html>


<meta>
<script>
    function getParentWindow(){
        window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;);
        alert(window.parent.location);
    }
</script>


    <button>获取</button><br>
    <div></div>

(11) screenLeft: スクリーンウィンドウを基準とした x 座標を返します。

screenTop: スクリーンウィンドウを基準とした y 座標を返します。

screnX: 画面ウィンドウを基準とした x 座標を返します。

screenY: スクリーンウィンドウを基準とした y 座標を返します。

nbsp;html>


<meta>
<script>
    function openNewWindow(){
        myNewWindow=window.open(&#39;&#39;,&#39;&#39;);
        myNewWindow.document.write(" 这是新窗口<br/>");
        myNewWindow.document.write(" ScreenLeft: " + myNewWindow.screenLeft +"<br/>");
        myNewWindow.document.write(" ScreenTop: " + myNewWindow.screenTop + "<br/>");
        myNewWindow.document.write(" ScreenX: " + myNewWindow.screenX + "<br/>");
        myNewWindow.document.write(" ScreenY: " + myNewWindow.screenY + "<br/>");
    }
</script>


    <button>获取</button><br>

(12) sessionStorage: ウィンドウまたはタブを閉じた後、同じウィンドウ (またはタブ) のデータを一時的に保存するために使用されます。このデータは削除されます。

nbsp;html>


<meta>
<script>
    function getClickCount() {
        if(typeof(Storage) !== "undefined") {
            if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
            } else {
                sessionStorage.clickcount = 1;
            }
            document.getElementById("myInfo").innerHTML = "你已经点击了 " + sessionStorage.clickcount + " 次。";
        } else {
            document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>


    <button>点击</button><br>
    <div></div>

ブラウザがサポートしていない場合:

ブラウザがサポートしている場合:

(13 ) self: 現在のウィンドウオブジェクトへの参照を返します。この属性を使用すると、複数のウィンドウが開いているときに、現在のウィンドウ内の関数またはプロパティが混乱なく正しく呼び出されることを確認できます。

top: 現在のウィンドウの最上位のブラウザウィンドウを返します。

nbsp;html>


<meta>
<script>
    function check(){
        if (window.top!=window.self) {
            document.write("这个窗口不是最顶层窗口!")
        }
        else{ 
            document.write("这个窗口是最顶层窗口!")
        } 
    }
</script>


    <button>点击</button><br>

2 、Window 对象的方法

(1) alert(): 显示带有一段消息和一个确认按钮的警告框。

　 atob(): 解码一个 base-64 编码的字符串。

　 btoa(): 创建一个 base-64 编码的字符串。

nbsp;html>


<meta>
<script>
    function myFunction(){
        alert("你好，我是一个警告框！"); //alert方法
        var strA = "Hello world!";
        var btoastr = window.btoa(strA); //btoa() 方法用于创建一个 base-64 编码的字符串。
        var atobstr = window.atob(btoastr); //atob() 方法用于解码使用 base-64 编码的字符串。
        alert("编码字符串为: " + btoastr + "  " + "解码后字符串为: " + atobstr);
    }
</script>


    <button>点击</button><br>

(2) blur(): 把键盘焦点从顶层窗口移开。focus(): 把键盘焦点给予一个窗口。

nbsp;html>


<meta>
<script>
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;);
        myWindow.document.write("The new window");
        myWindow.blur();
        //myWindow.focus();
    }
</script>


    <input>

(3) setInterval(): 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval(): 取消由 setInterval() 设置的 timeout。

nbsp;html>


<meta>
<script>
    //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
    var myVar = setInterval(function(){ myTimer() }, 1000); 

    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("timeInfo").innerHTML = t;
    }

    function myStopFunction() {
        clearInterval(myVar); //取消由 setInterval() 函数设定的定时执行操作。
    }
</script>


    <button>停止时间</button>
    <p></p>

(4) setTimeout(): 在指定的毫秒数后调用函数或计算表达式。

clearTimeout(): 取消由 setTimeout() 方法设置的 timeout。

nbsp;html>


<meta>
<script>
    var myVar;

    function myFunction() {
        //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
        myVar = setTimeout(function(){ alert("Hello") }, 3000);
    }

    function myStopFunction() {
        clearTimeout(myVar); //如果alert弹出方法还未执行，我们可以使用 clearTimeout() 来阻止它。
    }
</script>


    <button>设置3秒弹出Hello</button>
    <button>停止弹出</button>

(5) close(): 关闭浏览器窗口。

　　open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。

　　createPopup(): 创建一个 pop-up 窗口。

　　print(): 打印当前窗口的内容。

nbsp;html>


<meta>
<script>
    var myWindow;
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;); //打开新窗口
        myWindow.document.write("使用open()方法打开的新窗口");
    }
    function closeWin(){
        myWindow.close(); //关闭新打开的窗口
    }
    function create_Popup(){
        var p=window.createPopup(); //创建一个 pop-up 窗口
        var pbody=p.document.body;
        pbody.style.backgroundColor="lime";
        pbody.style.border="solid black 1px";
        pbody.innerHTML="这是createPopup()弹出";
        p.show(100,100,200,50,document.body);    
    }
    function my_print(){
        window.print(); //调出windows系统的打印机
    }
</script>



    <input><br>
    <input><br>
    <input><br>
    <input><br>

(6) confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。

　　prompt(): 显示可提示用户输入的对话框。

nbsp;html>


<meta>
<script>
    function my_prompt(){ 
        var x; 
        var Name=prompt("请输入你的名字","Harry Potter"); 
        if (Name!=null && Name!=""){ 
            document.getElementById("myInfo").innerHTML="你好 " + Name + "! ";
        } 
    }
    function my_confirm(){
        var x;
        var r=confirm("请点击");
        if (r==true){
            x="确定";
        }
        else{
            x="取消";
        }
        document.getElementById("myInfo").innerHTML=x;
    }
</script>



    <input>
    <input><br>
    <div></div>

(7) getComputedStyle(): 获取指定元素的 CSS 样式。

nbsp;html>


<meta>
<script>
    function my_getComputedStyle(){
        var elem = document.getElementById("myInfo");
        var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
        document.getElementById("myInfo").innerHTML = theCSSprop;
    }
</script>


    <input>
    <div></div>

(8) moveBy(): 可相对窗口的当前坐标把它移动指定的像素。

　 moveTo(): 把窗口的左上角移动到一个指定的坐标。

nbsp;html>


<meta>
<script>
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;);
        myWindow.document.write("这是新窗口");
    }
    function moveByWin(){
        myWindow.moveBy(200,200); //相对窗口的当前坐标把它移动指定的像素
        myWindow.focus();
    }
    function moveToWin(){
        myWindow.moveTo(0,0);//把窗口的左上角移动到一个指定的坐标
        myWindow.focus();
    }
</script>


    <input>
    <input>
    <input>

(9) resizeBy(): 按照指定的像素调整窗口的大小。

　 resizeTo(): 把窗口的大小调整到指定的宽度和高度。

nbsp;html>


<meta>
<script>
    var myWindow;
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=200,height=100&#39;);
        myWindow.document.write("这是新窗口");
    }
    function resizeByWin(){
        myWindow.resizeBy(100,50);
        myWindow.focus();
    }
    function resizeToWin(){
        myWindow.resizeTo(50,30);
        myWindow.focus();
    }
</script>


    <input>
    <input>
    <input>

(10) scrollBy(): 按照指定的像素值来滚动内容。

scrollTo(): 把内容滚动到指定的坐标。

nbsp;html>


<meta>
<script>
    var myWindow;
    function openWin(){
        myWindow=window.open(&#39;&#39;,&#39;&#39;,&#39;width=50,height=20&#39;);
        myWindow.document.write("-<br/>");
        myWindow.document.write("---<br/>");
        myWindow.document.write("-----<br/>");
        myWindow.document.write("-------<br/>");
        myWindow.document.write("---------<br/>");
        myWindow.document.write("-----------<br/>");
        myWindow.document.write("-------------<br/>");
        myWindow.focus();
    }
    function scrollByWin(){
        myWindow.scrollBy(20,20); //按照指定的像素值来滚动内容
        myWindow.focus();
    }
    function scrollToWin(){
        myWindow.scrollTo(50,50); // 把内容滚动到指定的坐标
        myWindow.focus();
    }
</script>


    <input>
    <input>
    <input>

二、Navigator 对象

1、Navigator 对象的属性

        (1) appCodeName: 返回浏览器的代码名
       (2) appName: 返回浏览器的名称
       (3) appVersion: 返回浏览器的平台和版本信息
       (4) cookieEnabled: 返回指明浏览器中是否启用 cookie 的布尔值
       (5) platform: 返回运行浏览器的操作系统平台
       (6) userAgent: 返回由客户机发送服务器的user-agent 头部的值

nbsp;html>


<meta>
<script>
    document.write("浏览器代号: " + navigator.appCodeName);
    document.write("<br/><br/>浏览器名称: " + navigator.appName);
    document.write("<br/><br/>版本信息: " + navigator.appVersion);
    document.write("<br/><br/>是否启用 Cookie: " + navigator.cookieEnabled);
    document.write("<br/><br/>硬件平台: " + navigator.platform);
    document.write("<br/><br/>用户代理: " + navigator.userAgent);
</script>

2、 Navigator 对象的方法

(1) javaEnabled(): 指定是否在浏览器中启用Java
(2) taintEnabled(): 规定浏览器是否启用数据污点(data tainting)

nbsp;html>


<meta>
<script>
    document.write("<br/><br/>启用Java: " + navigator.javaEnabled());
    document.write("<br/><br/>启用数据污点: " + navigator.taintEnabled());
</script>

要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がJavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

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