Javascript Question posted in
A very good W3school tutorial can be found here.

Page reload in IOS devices using javascript in

The screens in my IOS device doesn’t reload after clicking the back button. It works using PC and android devices. Is there specific reload code for IOS device?

here is my code

```
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var goBackButton = document.getElementById("goBackButton");

    if (goBackButton) {
      goBackButton.addEventListener("click", function() {
        window.location.reload();
        window.history.back();
     });

      goBackButton.addEventListener("touchstart", function() {
        window.location.href = window.location.href
        window.history.back();
      });
    }
  });
</script>
```

I was expecting it to reload the screen so it updates the newly fetched data after clicking the back button.

Tags:

2

Answers


  1. 0

    Safari on iOS has unique behavior when it comes to managing history and caching pages. The best method is to use the pageshow event, which is triggered when a page is navigated back to, and persisted event which tells if a webpage is loading from a cache or not.

    <script>
  document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("pageshow", function(event) {
      let page = event.target;
      if (page.id === "yourPageId") { 
        if (event.persisted) {
          window.location.reload();
        }
      }
    });
  });
</script>
    Login or Signup to reply.
  2. 0

    • When you call window.location.reload() and then window.history.back(), Safari first reloads the page and then navigates back to the previous page. This causes the page to be reloaded twice, which is why it doesn’t update with the new data.

    • You can use the window.history.go(-1) method instead of window.history.back(). This method navigates the browser to the previous page in the history, without reloading the current page.

      <script>
 document.addEventListener("DOMContentLoaded", function() {
   var goBackButton = document.getElementById("goBackButton");

   if (goBackButton) {
    goBackButton.addEventListener("click", function() {
      window.location.reload();
      window.history.go(-1);
    });

    goBackButton.addEventListener("touchstart", function() {
      window.location.href = window.location.href;
      window.history.go(-1);
    });
  }
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search