Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 history API on iOS Chrome

Tags:

For testing purposes I want to populate the history with a number of entries. More precisely I want to add X items to kind of disable the backbutton of the browser, since even if the user is clicking X times, he will stay on the same page.

I'm doing this the following way:

(function (){
   for (var x = 0; x < 10; x++) {
     history.pushState(null, document.title, location.pathname);    
   }        
}());

So when the page is being loaded 10 elements of the current page are injected into the history. This approach works on all browsers that support the history API except Chrome on iOS!!!

Using the above code, Chrome on iOS (7 to 10) does some really weird things:

  • It replaces the title in the tab with the url of the current page (so instead of showing "my great webpage" in the tab title, it shows "mygreatpage.com/samplepage1"
  • long pressing the back button to check the entries, Chrome shows no additional added entries - every other browser shows 10 additional entries as intended by the code above

Safari and every other iOS browser do what I want them to. What am I doing wrong?

like image 327
sangrila B Avatar asked Feb 10 '17 18:02

sangrila B


People also ask

What is HTML5 history API?

The HTML5 History API gives developers the ability to modify a website's URL without a full page refresh. This is particularly useful for loading portions of a page with JavaScript, such that the content is significantly different and warrants a new URL. Here's an example.

How do I view browser history in JavaScript?

To access this history stack we need to use the History object in JavaScript. History object: The history object contains the browser's history. The URLs of pages visited by the user are stored as a stack in the history object.


1 Answers

For chrome on iOS native history.pushState is overidded by additional extension, if you alert(history.pushState) you can see it is not native code as we see on other browsers

see below polyfills may help you,

  1. HTML5-History-API

  2. history.js

like image 127
ShilpeshAgre Avatar answered Sep 30 '22 19:09

ShilpeshAgre