Managing the back button functionality in a UWP app using JavaScript

I am in the process of developing a UWP app using JavaScript. When I click the Back Button, it currently just closes the app. However, I am looking to modify this behavior to instead trigger a JavaScript function.

If anyone has knowledge and experience with creating a Windows Runtime component and invoking it from JavaScript in order to manage the Back Button press event, your guidance and code examples would be greatly appreciated.

Answer №1

let systemNavigation = Windows.UI.Core.SystemNavigationManager.getForCurrentView();

function initializeApp(){
    // Setting up backRequested event
    if (systemNavigation !== null) {
        systemNavigation.addEventListener("backrequested", handleBackRequest, false);
    }
}

function handleBackRequest() {
    if (window.location.href.indexOf("/default.html") === -1) {  // If not on home page, go back
        // Navigate back
        window.history.back();
    }
}

Reference: https://github.com/Microsoft/TVHelpers/blob/master/WinRTjs/BackBtnTitleBarCustomization/js/main.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

When looking at this snippet of code: this.router.navigate(['/login'],{queryParams:{returnUrl:state.url}}); An error is displayed stating that "Property 'url' does not exist on type '(name: string, styles: AnimationStyleMetadata". ...

Transform numbers from decimal format to strings with no commas or dots involved

Is there a way to convert a decimal amount in .NET to a numbers-only string without writing a lot of code? For example, how can I convert 123,456.78 to 12345678? I attempted to use the following code: var dotPos = amount.ToString().LastIndexOf('.&ap ...

Issue with Jest snapshot test: Error generated while trying to instantiate a new object within the componentDidMount() lifecycle method

I encountered a problem with my component, which has a <canvas> as its root DOM element. In the componentDidMount() method, I am drawing an image on the canvas using a 3rd-party library. However, when running my test, I faced an error stating: TypeE ...

Using React Native to display an SVG path inside an SVG viewbox

I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I ...

Display or conceal a div when hovering over dropdown menu choices

$('#dropdown-list').on('change',function(){ if( $(this).val()==="option 1" ){ $("#diva").hide() } else { $("#divb").show() } }); The code above is being used to hide or show a div based on a dropdown selection, which is f ...

Bounding rectangle of a plane in Three.js according to the viewport and the problem of clipping near planes

This is a common issue with WebGL, but in order to provide clarity, I will be using three.js to illustrate the problem at hand. Imagine you have a plane and a perspective camera. Your goal is to determine the bounding rectangle of the plane relative to th ...

What is the method to remove the overlay from view?

Can anyone help with a small issue I'm having? When I click on button one, a modal popup appears but the overlay doesn't disappear when unloading. I've tried the code below, but can someone suggest what might be causing the problem? var po ...

Populating Dropdown list with values based on input provided in Textbox

Can you assist me in finding the solution to this issue? I have a TextBox and a DropDown list. For example, if I type "Anu" into the textbox, I want it to populate the dropdown list based on the text entered. How can I achieve this? I am working with vb. ...

TypeError: Unable to access the 'items' property of a null value

I am currently working on a program and I am facing an issue where I need to access something from the first component in the second component. Can anyone provide assistance on how to properly construct this? Below is a snippet of my code: ...

Angular2 data tables

Currently, I am incorporating the angular2-data-table library into my project. My goal is to include a column of checkboxes in the table, where clicking on a checkbox selects the corresponding row. Can anyone provide guidance on how to add this column? ...

Deploying a C# project on Visual Studio 2012 using an external database

I could really use some assistance from you all on the correct way to publish a project that I've developed in Visual Studio. Here's the issue: my project runs smoothly on my personal computer and even when I try to publish it, but when I attemp ...

Is it possible to implement a Promise.some() function that includes a timeout

Scenario - collect multiple URLs and cache the responses. URLs that are processed quickly (e.g. within 500ms) are included in the current pass, while those that take longer are still cached for use in the next round (approximately 10 minutes later in our a ...

Using Angular 1's ng-repeat along with a filter to separate string values within a single JSON array

With the use of ng-repeat, I was able to append the values from a JSON array. However, I encountered an issue with the pictureURLS object containing string values of images. My goal is to separate the string values in pictureURLS and display the images ind ...

Angular feature that enables the use of multiple filter values at once through pipes

Using *ngFor, buttons are dynamically generated to filter by different values. For example, if the key 'location' has values 'west' and 'england', buttons for both 'west' and 'england' will be available for ...

Express is encountering a non-executable MIME type of 'text/html' with Webpack

My express application setup is as follows: const express = require("express"); const app = express(); const server = require("http").Server(app); const path = require("path"); const port = process.env.PORT || 5000; app.use(& ...

When implementing components, Material UI encounters errors in trying to read properties of null

Currently, I am facing a challenge in displaying text using MUI in Next.js. I initialized my Next app using npx create-next-app. To troubleshoot the issue, I have attempted deleting node-modules and running npm i, repeating the process in the parent direct ...

Generate a select query on the fly for SqlDataSource

I am facing a situation where I need to synchronize the data in a GridView with a drop down list of table names. My current solution involves using a Stored Procedure with the table name as a parameter, but I'm curious if there are simpler alternative ...

At what point do C# automatic properties carry out initialization?

In a webforms .aspx page system, the master page automatically initializes some properties like this: public bool MyProp => bool.Parse(Service.Settings["YorN"]); While profiling the page load, I noticed a significant gap between the PreRender event an ...

Showing Nested Numerical Objects Post RequestBeing Made

Currently, I am facing an issue with accessing nested objects referred to by numbers. After making a service call to retrieve a JSON object, I mapped each field to another object which will be used for displaying the fields in HTML. The problem arises whe ...

Angular throwing unrecognized module error with Node.js and MongoDB

Working on a MEAN-stack project and encountering issues with data-binding. The module responsible for connecting the View to the Backend is not getting instantiated, resulting in an error message in the console: [$injector:modulerr] Failed to instantiate ...