Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Window Navigator in TypeScript
The Window object, known as the Global TypeScript object, represents the current web page in a browser window. The location, history, and document of the current page, as well as other methods and attributes, can all be accessed and controlled using this method. The Navigator object is a property of the Window object. It contains information about the browser and device used to visit the website, including the user agent, platform, and language.
TypeScript's Window.navigator object can receive information about the device browser and perform operations on those objects. The Window and Navigator objects can be used in TypeScript by identifying them as global variables, and the declare keyword can express the Window and Navigator objects as global variables. Users can also use the Navigator interface to provide the type of the navigator object for better type-checking and code completion.
Syntax
declare var window: Window; declare var navigator: Navigator;
You can then use the properties and methods of these objects in your TypeScript code like this −
console.log(window.location.href); console.log(navigator.userAgent);
Please note that the Window and Navigator objects are unavailable in Node.js, so you should only use them in a browser environment.
Example
It is an example of using the Window and Navigator objects in a TypeScript web application, and we will learn to use them. We are displaying the URL and browser information on an HTML page using it. The following steps need to be performed −
Steps
We first declare the Window and Navigator objects as global variables so we can use them in our TypeScript code.
Then, we use the document.getElementById() method to get references to the <p> elements in the HTML page where we want to display the URL and browser information. We store these references in the URL and browser variables of type HTMLParagraphElement.
Then, we use the innerHTML property to set the text content of these elements to the current URL and browser information, respectively. The window.location.href property returns the current URL of the page and the navigator.userAgent property returns a string representing the browser and platform used to access the page.
TypeScript Code −
This is the TypeScript code that needs to be compiled to get the JavaScript code we can add to the HTML.
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 Code −
This is the HTML code where we add the compiled TypeScript code.
<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>
Example 2
In this example, we will use the Window Navigator object in TypeScript and perform some steps as follows −
Steps
we first declare the Window and Navigator objects as global variables so we can use them in our TypeScript code.
Then, we use the document.getElementById() method to get references to the button element and the <p> element in the HTML page where we want to display the browser name.
We store these references in the redirectBtn and browserName variables, which are of type HTMLButtonElement and HTMLParagraphElement.
Then, we use the addEventListener method to add a click event listener to the button element. When the button is clicked, the event listener function will be called, redirecting the user to a different URL using the window.location.href property.
After that, we use the innerHTML property to set the text content of the <p> element to the browser name, which we get from the navigator.appName property. When this code is executed in the browser, and when the user clicks on the button, it will redirect the user to the "'https://www.tutorialspoint.com" website and display the user's browser name.
TypeScript Code
This is the TypeScript code that needs to be compiled to get the JavaScript code we can add to the HTML.
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 Code
This is the HTML code where we add the compiled TypeScript code.
<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>
Please note that the navigator.appName property is considered obsolete, and it's not recommended in modern browsers. You can use the navigator.userAgent property or use the feature detection method instead.
2K+ Views
