TypeScript中的Window Navigator

Window对象，也称为全局的TypeScript对象，代表在浏览器窗口中的当前网页。可以使用该方法访问和控制当前页面的位置、历史和文档，以及其他方法和属性。Navigator对象是Window对象的一个属性。它包含有关访问网站所使用的浏览器和设备的信息，包括用户代理、平台和语言。

TypeScript的Window.navigator对象可以接收有关设备浏览器的信息，并对这些对象进行操作。可以通过将它们标识为全局变量，并使用declare关键字来表达Window和Navigator对象的全局变量。用户也可以使用Navigator接口为navigator对象提供类型，以便进行更好的类型检查和代码补全。

语法

declare var window: Window;
declare var navigator: Navigator;

然后你可以在你的TypeScript代码中像这样使用这些对象的属性和方法：

console.log(window.location.href);
console.log(navigator.userAgent);

请注意，在Node.js中不可用Window和Navigator对象，所以只能在浏览器环境中使用它们。

示例

这是一个在TypeScript Web应用中使用Window和Navigator对象的示例，我们将学习如何使用它们。我们将使用它们在HTML页面上显示URL和浏览器信息。需要执行以下步骤：

步骤

首先，我们声明Window和Navigator对象为全局变量，以便在TypeScript代码中使用它们。
然后，我们使用document.getElementById()方法获取对HTML页面中要显示URL和浏览器信息的

元素的引用。我们将这些引用存储在类型为HTMLParagraphElement的URL和browser变量中。

然后，我们使用innerHTML属性将这些元素的文本内容分别设置为当前URL和浏览器信息。window.location.href属性返回页面的当前URL，navigator.userAgent属性返回表示访问页面的浏览器和平台的字符串。

TypeScript代码 –

这是需要编译的TypeScript代码，以获取可以添加到HTML中的JavaScript代码。

declare var window: Window
declare var navigator: Navigator

let url: HTMLParagraphElement = document.getElementById(
   'url'
) as HTMLParagraphElement
let browser: HTMLParagraphElement = document.getElementById(
   'browser'
) as HTMLParagraphElement

url.innerHTML += window.location.href
browser.innerHTML += navigator.userAgent

HTML代码 −

这是HTML代码，我们在其中添加编译后的TypeScript代码。

<html>
   <body>
      <h2><i>Window Navigator</i> in TypeScript</h2>
      <p id="url" style="padding: 10px; background: #d5ed9c">URL:</p>
      <p id="browser" style="padding: 10px; background: #9ceda7">Browser:</p>
      <script>
         //Compiled TypeScript File
         var url = document.getElementById('url')
         var browser = document.getElementById('browser')
         url.innerHTML += window.location.href
         browser.innerHTML += navigator.userAgent
      </script>
   </body>
</html>

示例2

在这个示例中，我们将在TypeScript中使用Window Navigator对象，并按照以下步骤执行：

步骤

我们首先将Window和Navigator对象声明为全局变量，以便在我们的TypeScript代码中使用它们。
然后，我们使用document.getElementById()方法获取对按钮元素和HTML页面中的

元素的引用，我们要在其中显示浏览器名称。

我们将这些引用存储在redirectBtn和browserName变量中，它们的类型分别是HTMLButtonElement和HTMLParagraphElement。
然后，我们使用addEventListener方法向按钮元素添加点击事件监听器。当按钮被点击时，事件监听器函数将被调用，使用window.location.href属性将用户重定向到不同的URL。
之后，我们使用innerHTML属性将

元素的文本内容设置为浏览器名称，我们从navigator.appName属性获取。当这段代码在浏览器中执行时，当用户点击按钮时，它将重定向用户到https://www.tutorialspoint.com网站，并显示用户的浏览器名称。

TypeScript代码

这是需要编译为JavaScript代码并添加到HTML中的TypeScript代码。

declare var window: Window
declare var navigator: Navigator

let redirectBtn = document.getElementById('redirect') as HTMLButtonElement
let browserName: HTMLParagraphElement = document.getElementById(
   'browser-name'
) as HTMLParagraphElement

redirectBtn.addEventListener('click', function () {
   window.location.href = 'https://www.tutorialspoint.com'
})

browserName.innerHTML = navigator.appName

HTML代码

这是我们添加编译后的TypeScript代码的HTML代码。

<html>
   <body>
      <h2><i>Window Navigator</i> in TypeScript</h2>
      <button id="redirect">Redirect</button>
      <p id="browser-name" style="padding: 10px; background: #9ceda7">Browser:</p>
      <script>
         //Compiled TypeScript File
         var redirectBtn = document.getElementById('redirect')
         var browserName = document.getElementById('browser-name')
         redirectBtn.addEventListener('click', function () {
            window.location.href = 'https://www.tutorialspoint.com/index.htm'
         })
         browserName.innerHTML = navigator.appName
      </script>
   </body>
</html>

请注意，navigator.appName属性被认为是过时的，在现代浏览器中不建议使用。您可以使用navigator.userAgent属性或使用特性检测方法代替。