Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10.

I am currently facing an issue with getting the confirmation box to display properly across different browsers.

To begin, please visit and log in with the following credentials:

username: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6e64767b7079282a5e79737f777f72307d7173">[email protected]</a>
password: skl@0!_~!(

Once logged in, navigate to the /welcome page. Click on Settings in the left sidebar and proceed to the Membership tab.

If you can see "Enable Membership Features", click on it, make any changes, and then move to another page. You should notice the confirmation box appearing the first time you attempt to leave the page. https://i.sstatic.net/ENIeA.png

Click on "Leave" to go to your desired page, return to the Settings page, and try the same action again. In Safari, you will not see the confirmation box reappear.

The code snippet I utilized can be found at:

/* settingsPages.isChanged() is my custom function */
window.addEventListener("beforeunload", function(event) {
    if (settingsPage.isChanged()) {
        event.returnValue = "some string";
        return "some string";
    }
});

This functionality works perfectly on Google Chrome and Firefox, but seems to have an issue specifically on Safari.

Thank you for your assistance!

Answer №1

The reason behind this issue is likely tied to Safari's Back-Forward cache feature. For more detailed information, you can refer to the following insightful article:

To resolve this, a simple approach is to reload the page if it is being loaded from the cache. This can be achieved using the following code snippet:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};

The key part to pay attention to is event.persisted. It returns a value of true when the page is loaded through the browser's "back" or "forward" actions.

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

How to create a thumbnail hover effect with CSS3 and javascript, overcoming the z-axis issue

Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing ...

What is the best way to retrieve the background color of specific table cells?

I have a table that showcases various pieces of information. One interesting feature I added is a notes column, which includes a tooltip created using CSS and jQuery. However, there seems to be an issue with the tooltip's behavior - when I hover over ...

Performing cross-origin GET request

I need help with a scenario involving a link and some JavaScript code. The setup is as follows: <a id="link" href="https://yahoo.com" target="blank">Link</a> Here is the script I'm using: var security = function() { var link ...

How can you ensure a cohesive visual style throughout various Razor and HTML views?

In my ASP.Net MVC 5 application, I have a Layout.cshtml and HTML view page included. However, I want to maintain a consistent look and feel across multiple views in the application. I am aware that this can be achieved by using a Razor view page with the f ...

Error message: "The property or method you are trying to access is not defined

I had no issues with my app until I added the JavaScript, now I'm getting constant errors in the console. One of the errors I see is: Property or method "show" is not defined on the instance but referenced during render. Make sure that this proper ...

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

Looking for assistance in personalizing a Tab slider plugin with jQuery and CSS?

Hi there! I stumbled upon this post (http://stackoverflow.com/questions/7645702/tab-slide-out-using-jquery-need-more-than-one) while experimenting with a plugin. I'm curious if anyone here knows how to integrate this plugin into a menu. My idea is to ...

Implementing NgRx state management to track and synchronize array updates

If you have multiple objects to add in ngrx state, how can you ensure they are all captured and kept in sync? For example, what if one user is associated with more than one task? Currently, when all tasks are returned, the store is updated twice. However, ...

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

Populating the DOM with information from handlebar based on the key's value

I am trying to display specific data from my JSON object in the DOM. Specifically, I want to add the information for keys 100 and 101 only. JSON var school = { "students": { "100": { "name": "abc", "bdate": "02/19/2000" }, "10 ...

jQuery is giving me trouble when trying to modify the select option. Despite my best efforts and exploring all possible solutions, I'm

My HTML code includes a select element with the id 'project-entry-form--category'. The options for this select element are loaded dynamically using AJAX. When I use console.log($('#project-entry-form--category')), jQuery returns all in ...

Is the package downloaded through NPM identical to the local file in my particular situation?

In my current project, the previous developers included jQuery in the local environment, and a minified version 3.1.1 has been maintained for the past two years. I am now attempting to manage it using NPM. However, more experienced developers are cautionin ...

What is the best way to automatically select a checkbox when using ng-repeat on page

I'm looking to automatically check an input checkbox when the page loads, and if it's checked, subtract its value from the total. How can I tackle this issue? Here's the HTML snippet: <p>{{vm.TOTAL VALUE}}</p> <tr ng-repeat= ...

Tips for testing views in ember.js using unit tests

We are currently delving into the world of Ember.js. Our development process is completely test-driven, and we aim to apply the same methodology to Ember.js. Having prior experience in test-driven development with Backbone.js apps using Jasmine or Mocha/Ch ...

Error: Attempting to access the first element of a null property is not allowed

Currently, I am working on a NodeJS Project that utilizes Sails.js as the framework. The goal is to implement a permissions system where each group's permissions are set using Check Boxes within a form powered by AngularJS. However, upon clicking th ...

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

Using parameters from jQuery to populate an ASP.NET MVC partial view

Currently, I am focusing on the Location Detector Module within the Project. To detect latitude and longitude using jQuery, there is a button that submits the ajax form to the action, which then returns a partial view. I am wondering how I can automatica ...

Setting text alignment in Bootstrap based on breakpoints

Imagine this code: import React from 'react' import DarkPattern from '../Assets/dark-pattern.jpg' const Profile = () => { return ( <div> <section className="bg-dark text-light text-center " ...

Verify that the input is zero and then proceed to deactivate the submit button if it is indeed zero in AngularJS

app.controller('HelloController', function($scope) { console.log($scope.input1); console.log($scope.input2); if (($scope.op_option == 4) && ($scope.input2 == 0)) { myForm.$invalid; } }); <form id="calc" method="pos ...

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...