HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのnavigator.appNameプロパティとは?ブラウザ名を取得する方法


HTMLの navigator.appName プロパティは、現在利用しているブラウザの名前を文字列として返します。JavaScriptから手軽にブラウザ情報を取得できるプロパティの一つです。

構文

基本的な構文は以下のとおりです。

navigator.appName

それでは、HTMLの navigator.appName プロパティを使った具体的なサンプルを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.5rem;
      color: #fff;
   }
</style>
<body>
<h1>HTML navigator appName プロパティのデモ</h1>
<button class="btn" onclick="display()">ブラウザ名を表示</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector(".show").innerHTML = "ブラウザ名:" + navigator.appName;
   }
</script>
</body>
</html>

出力結果

HTMLのnavigator.appNameプロパティとは?ブラウザ名を取得する方法

ブラウザ名を表示」ボタンをクリックすると、画面にブラウザの名前が表示されます。

HTMLのnavigator.appNameプロパティとは?ブラウザ名を取得する方法

補足:appNameプロパティを使用する際の注意点

歴史的な互換性を保つため、Chrome、Firefox、Edge、Safari など、現在主流のほとんどのブラウザでは、実際のブラウザの種類に関係なく navigator.appName は常に「Netscape」という値を返します。そのため、このプロパティで正確なブラウザ判定を行うことはできません。

また、appName プロパティはすでに非推奨(deprecated)とされており、将来的に廃止される可能性があります。実用的なブラウザや環境の判別を行いたい場合は、navigator.userAgent の解析や、特定の機能が使えるかどうかを確認する「機能検出(フィーチャーデテクション)」の活用が推奨されます。

  1. HTMLのnavigator.platformプロパティとは?使い方とサンプルコードを解説

    HTMLのnavigator.platformプロパティは、ブラウザがコンパイルされた(動作している)プラットフォームの情報を文字列として返します。このプロパティを利用することで、JavaScriptからユーザーのOS環境に関する情報を取得できます。 構文 navigator.platformプロパティの構文は以下の通りです。 navigator.platform 戻り値 このプロパティは、プラットフォーム名を表す文字列を返します。主な戻り値の例は以下の通りです。 Windows環境:「Win32」 Mac環境:「MacIntel」 Linux環境:「Linux x86_64」など HTM

  2. HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

    navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値(boolean)を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。 構文 基本的な構文は以下のとおりです。 navigator.onLine 戻り値は次のようになります。 オンラインの場合:true オフラインの場合:false サンプルコード ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオ