Simplify script

Solution onbeforeunload not working on IOS devices

0 Comments
views 104

Here let have a look on issue thet the above event window.onbeforeunload is not working on IOS devices like Ipad, i phone, and working very well with andrios and web browser on windows but its stucks with safari, to over come that situtation we have a event for ios devices pagehide event so in code base we need to check if the device is IOS then we need to fire page hide event (IOS pagehide event), and if the browser is wondows then we normally fires onbeforeunload event, also let understand what these event will do.

window.onbeforeunload and window.onunload is not working on IOS devices

onbeforeunload / onhide event

This event allows you to display a message in a confirmation dialog box to inform the user whether to stay or leave the current page.

The standard message displayed in the confirmation dialog varies across different web browsers. Typically, it resembles “Are you sure you want to leave this page?”This message cannot be eliminated unless you invoke preventDefault() on the event.

Solution to onbeforeunload on IOS device

 var isOnIOS = navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i);
    var eventName = isOnIOS ? "pagehide" : "beforeunload";
    window.addEventListener(eventName, function (event) {
        // your code before closing the browser
    })
views 104
Previous
velocity foreach loop

How To Iterate Items List In Velocity Script

Next
Sightly list iteration

AEM Sightly iterate through list using data-sly-list

Avatar of Simplify Script
About Author
Simplify Script

Further reading

  • React UseEffect | simplifyScript

    Understanding the useEffect hook in React

    In this article, we will learn about another React hook called useEffect(), through this article you will be able to understand what is react useEffect Hook and how to use useEffect() hook in react, this is most communally used hook after useState() hook, we mostly use this hook in every component on react now first […]
    views 25
  • React useState function

    How to Use useState Hook in React Application

     In a React application, normal vanilla JavaScript may not work for some concepts. For example, if I want to toggle a class on a button click or add and remove classes, I might need to show a popup on the website. This can be easily achieved in vanilla JavaScript using the element.classList.toggle(“newClass”) method, allowing us to add […]
    views 45
  • javascript DOm manipulation - simplifyscript

    What is DOM manipulation in javascript 

    In this article, we will explore JavaScript DOM manipulation, a key feature of JavaScript that allows developers to modify the Document Object Model (DOM) of a webpage. DOM manipulation enables you to dynamically alter the content and structure of HTML documents. To grasp this concept thoroughly, we’ll start by defining what the DOM is and […]
    views 33