Is it possible to prevent page refresh in a webpage using the 'beforeunload' event without displaying an alert message?
window.addEventListener("beforeunload", this.onUnload);
onUnload = e => {
e.preventDefault();
// How can I prevent page refresh from happening here without displaying an alert message.
// An alert message is currently being displayed, but I don't want that.
e.returnValue = "sure do you want to reload?";
}
There is no way to stop a page from unloading without informing the user.
Consider this scenario: you're on stackoverflow.com and try to go to github.com, but the website blocks your attempt to navigate away!
In the past, some browsers used to silently prevent unloading by setting the returnValue to an empty string. Thankfully, that era of deceitful practices has come to an end.
It seems like all you need to do is return either zero or false based on your comment. So in your function, you can simply write:
onUnload = e => {
//e.preventDefault();
return false;
}
When I tested this out, my browser (Chrome) automatically prompts me in my language asking if I really want to close the website, warning that data may be lost, making it i18n-compliant.
The prompt displays two buttons - "Refresh/Close" and "Abort": https://i.sstatic.net/WywZK.png
Everything runs smoothly on my local setup with Node 17.4.0. However, when I deploy to my production server at Render.com, which also uses Node version 17.4.0, I encounter errors in functions. I have documented this issue here: TypeError: (0 , crypto__WE ...
Is there a more efficient way to rewrite this code? For example, would using setState(ContentStore.getAll()) achieve the same outcome? I believe this approach appears overly cluttered and any method to simplify the code for readability would be greatly app ...
One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...
How can I limit the number of posts displayed using the react-juicer-feed component? import { Feed } from 'react-juicer-feed'; const MyFeed = () => { return ( <Feed feedId="<feed-id>" perPage={3} /> ...
Looking for a way to dynamically add background images to div elements? I'm currently iterating over an array of objects and returning divs, but I'm not sure how to set the background image based on the image URL in each object. Can anyone help m ...
Adobe Animate CC Javascript Can someone share the correct way to vertically center text in a dynamic text box using Javascript within Adobe Animate? This is different from the typical CSS method of centering text vertically in HTML. The following code d ...
Software Version: 2.5.11 Link to Reproduction: https://jsfiddle.net/ranjs/eh10wju7/ Steps to Reproduce: The functionality works correctly in Google Chrome, but an error occurs in Firefox: 'TypeError: undefined is not a constructor [Learn More] ...
Currently grappling with a sensitive issue concerning puppeteer. The HTML structure in question is as follows: <tbody> <tr rel="0" class="disabled" id="user6335934" class="odd"> ...
Is it feasible to integrate npm packages and Node.js APIs into my Adobe XD plugin development process? ...
Is there a way to convert a Vue.js component into static html without the need for javascript? I am specifically interested in retaining styles. I am searching for a library where I can execute code similar to this: SomeNestedComponent.vue <template> ...
I'm currently working on a project where I need to compile the answers selected in a quiz into a document. However, I've encountered a roadblock when certain questions are skipped based on previous responses. This leads to an error message: Un ...
I am faced with a nested JSON object that contains an array as one of its properties. Each item in the array is separated by a ';'. My goal is to use ';' as a delimiter to split each array item and make necessary changes. However, I am ...
I am facing an issue where my object is not updating immediately after a click event. It appears that a manual refresh or clicking on another element is necessary for the changes to take effect. How can I ensure that the object updates without the need for ...
app.js angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies']) .run(function ($ionicPlatform) { $ionicPlatform.ready(function () { if (window.c ...
Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...
Below is the JSON data containing button names and their corresponding image URLs: buttonDetails= [ { "name": "button1", "images": [{ "url": "https://localhost:8080/asset/d304904a-1bbd-11e6-90b9-55ea1f18bb ...
Is there a way to send this data to my email address? I need help implementing a method to achieve this. {Name: "John", phoneNumber: "12364597"} Name: "John" phoneNumber: "12364597" __proto__: Object ...
Currently, I am working on a project that involves using MySQL and PHP with Angular. Below is the code used for posting data: app.controller('buscar', function ($scope, $http) { $scope.postData = function () { var request = $http({ method: ...
Having trouble getting a PHP function to accept data from JavaScript, despite the PHP class working elsewhere in the application. The getTopFive() function works fine, but data insertion isn't happening as expected. Below is the code snippet along wit ...
It's fascinating to see that the two solutions provided are functioning correctly, but it seems like there might be an issue with the CSS I've written as the links do not appear when the hamburger button is pressed. Additionally, the background-c ...