In Safari when replaceState will be called more than 100 times, it will throw:

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

More info:

My problem is that on some specific conditions I change URL when user scrolls (using $(window).scroll(function() {.... As you may guess, I reach to the limit of 100 in less than 2 seconds.

history.replaceState({}, '', newStringWithURLToUpdateInClientBrowser);

Is there any workaround for this? Do existing libraries that allow managing history can solve this?

All other browsers aren't affected by this issue. Only Webkit. Here's the fiddle to see the bug: /

In Chrome it will reach to 100, but try running it in Safari.

In Safari when replaceState will be called more than 100 times, it will throw:

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

More info: https://forums.developer.apple./thread/36650

My problem is that on some specific conditions I change URL when user scrolls (using $(window).scroll(function() {.... As you may guess, I reach to the limit of 100 in less than 2 seconds.

history.replaceState({}, '', newStringWithURLToUpdateInClientBrowser);

Is there any workaround for this? Do existing libraries that allow managing history can solve this?

All other browsers aren't affected by this issue. Only Webkit. Here's the fiddle to see the bug: https://jsfiddle/j1sxxLwy/

In Chrome it will reach to 100, but try running it in Safari.

• javascript
• ios
• macos
• safari
• browser-history

2 Answers 2

Unfortunately, if you simply catch the errors, there will be long periods where all replaceState calls will be ignored and your URL will stop updating altogether.

The only workaround seems to be to throttle calls to replaceState to occur less than every 300 milliseconds. (Chrome and Firefox appear to similarly need a 50 millisecond throttle.)

The history-throttled package is a drop-in replacement for history.replaceState and history.pushState that automatically applies the appropriate amount of throttling for you. (Disclosure: I'm the author.)

have you considered throtlling the scroll event?

E.g.:

var timer = null;
$( window ).scroll( function() {
    clearTimeout( timer );
    timer = setTimeout( function() {
        history.replaceState( {}, '', newStringWithURLToUpdateInClientBrowser );
    }, 1000 );
} );

Cheers, Raoul