JavaScriptの基本-BOMブラウザオブジェクトモデル

 
 
目次

ロケーション

歴史

画面


ブラウザオブジェクトモデル(BOM)を使用すると、JavaScriptがブラウザと「通信」できます。BOMを使用すると、jsを介してブラウザを操作できます

ブラウザの操作を完了するために、BOMに一連のオブジェクトが用意されています。

これはブラウザ全体のウィンドウを表し、ウィンドウはWebページのグローバルオブジェクトでもあります 重要な属性は次のとおりです

すべてのJavaScriptグローバルオブジェクト、関数、および変数は、自動的にウィンドウオブジェクトのメンバーになります。

グローバル変数は、ウィンドウオブジェクトのプロパティです。

グローバル関数は、ウィンドウオブジェクトのメソッドです。

<script>
    window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
    window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸
</script>

現在のブラウザの情報を表します。このオブジェクトは、さまざまなブラウザを識別するために使用できます重要な属性は次のとおりです

<script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

ロケーション

現在のブラウザのアドレスバー情報を表します。場所からアドレスバー情報を取得するか、ブラウザを操作してページにジャンプできます。

<script>
    location.hostname   //返回 web 主机的域名
    location.pathname   //返回当前页面的路径和文件名
    location.port  //返回 web 主机的端口 (80 或 443)
    location.protocol   //返回所使用的 web 协议(http: 或 https:
</script>

歴史

ブラウザの履歴を表します。ブラウザの履歴はこのオブジェクトを介して操作できます

プライバシー上の理由により、オブジェクトは特定の履歴レコードを取得できず、ブラウザを操作してページを前後にめくることができるだけであり、ブラウザを閉じた後に有効になります

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<head>
<script>
    function goBack()
    {
        window.history.back()  //history.back() 方法加载历史列表中的前一个 URL。
    }
    function goForward()
    {
        window.history.forward()  //history forward() 方法加载历史列表中的下一个 URL。
    }
</script>
</head>
<body>
 
      <input type="button" value="Back" onclick="goBack()">  //向前
      <input type="button" value="Forward" onclick="goForward()">  //向后
</body>
</html>

画面

オブジェクトがユーザーのディスプレイの関連情報を取得できる、ユーザーの画面を表す情報。重要な属性は次のとおりです

<script>
document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);
</script>

このブログがお役に立てば、メッセージを残してください+いいね!

おすすめ

転載: blog.csdn.net/promsing/article/details/110201054