資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究TypeScript 中的視窗導航器
Window 物件，也稱為全域性 TypeScript 物件，表示瀏覽器視窗中的當前網頁。可以使用此方法訪問和控制當前頁面的位置、歷史記錄和文件，以及其他方法和屬性。Navigator 物件是 Window 物件的一個屬性。它包含有關用於訪問網站的瀏覽器和裝置的資訊，包括使用者代理、平臺和語言。
TypeScript 的 Window.navigator 物件可以接收有關裝置瀏覽器的資訊，並對這些物件執行操作。可以透過將 Window 和 Navigator 物件識別為全域性變數在 TypeScript 中使用它們，並且 declare 關鍵字可以將 Window 和 Navigator 物件表示為全域性變數。使用者還可以使用 Navigator 介面為 navigator 物件提供型別，以實現更好的型別檢查和程式碼補全。
語法
declare var window: Window; declare var navigator: Navigator;
然後，您可以在 TypeScript 程式碼中像這樣使用這些物件屬性和方法：
console.log(window.location.href); console.log(navigator.userAgent);
請注意，Window 和 Navigator 物件在 Node.js 中不可用，因此您應該只在瀏覽器環境中使用它們。
示例
這是一個在 TypeScript Web 應用程式中使用 Window 和 Navigator 物件的示例，我們將學習如何使用它們。我們使用它在 HTML 頁面上顯示 URL 和瀏覽器資訊。需要執行以下步驟：
步驟
我們首先將 Window 和 Navigator 物件宣告為全域性變數，以便我們可以在 TypeScript 程式碼中使用它們。
然後，我們使用 document.getElementById() 方法獲取對 HTML 頁面中 <p> 元素的引用，我們希望在其中顯示 URL 和瀏覽器資訊。我們將這些引用儲存在 HTMLParagraphElement 型別的 URL 和 browser 變數中。
然後，我們使用 innerHTML 屬性將這些元素的文字內容分別設定為當前 URL 和瀏覽器資訊。window.location.href 屬性返回頁面的當前 URL，而 navigator.userAgent 屬性返回一個字串，表示用於訪問頁面的瀏覽器和平臺。
TypeScript 程式碼：
這是需要編譯以獲取可以新增到 HTML 中的 JavaScript 程式碼的 TypeScript 程式碼。
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 程式碼：
這是我們新增已編譯 TypeScript 程式碼的 HTML 程式碼。
<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 頁面中按鈕元素和 <p> 元素的引用，我們希望在其中顯示瀏覽器名稱。
我們將這些引用儲存在 redirectBtn 和 browserName 變數中，它們分別為 HTMLButtonElement 和 HTMLParagraphElement 型別。
然後，我們使用 addEventListener 方法向按鈕元素新增一個點選事件偵聽器。當單擊按鈕時，將呼叫事件偵聽器函式，使用 window.location.href 屬性將使用者重定向到不同的 URL。
之後，我們使用 innerHTML 屬性將 <p> 元素的文字內容設定為瀏覽器名稱，我們從 navigator.appName 屬性獲取該名稱。當此程式碼在瀏覽器中執行時，並且當用戶單擊按鈕時，它將把使用者重定向到 "'https://tutorialspoint.tw" 網站並顯示使用者的瀏覽器名稱。
TypeScript 程式碼
這是需要編譯以獲取可以新增到 HTML 中的 JavaScript 程式碼的 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://tutorialspoint.tw'
})
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://tutorialspoint.tw/index.htm'
})
browserName.innerHTML = navigator.appName
</script>
</body>
</html>
請注意，navigator.appName 屬性被認為已過時，不建議在現代瀏覽器中使用。您可以使用 navigator.userAgent 屬性或使用功能檢測方法。
3K+ 次瀏覽
