TypeScript 窗口导航器

窗口对象，被称为Global TypeScript对象，代表了浏览器窗口中的当前网页。当前页面的位置、历史和文档，以及其他方法和属性，都可以通过这个方法来访问和控制。导航器对象是窗口对象的一个属性。它包含用于访问网站的浏览器和设备的信息，包括用户代理、平台和语言。

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

语法

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

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

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

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

例子

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

步骤

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

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

然后，我们使用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对象，并执行以下一些步骤– 1.

步骤

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

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

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

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

TypeScript代码

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

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代码

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

<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属性或使用特征检测方法来代替。