Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecating the unload event #980

Open
Garnet-Fox opened this issue Feb 11, 2024 · 2 comments
Open

Deprecating the unload event #980

Garnet-Fox opened this issue Feb 11, 2024 · 2 comments

Comments

@Garnet-Fox
Copy link

Garnet-Fox commented Feb 11, 2024

Good day.
There is an "unload" event in the source code, chromium browsers are already complaining about it. Currently, I noticed that on mobile devices like chromium, unload does not fire or does not always fire, the return cache does not work correctly.
What is the correct way to replace it with “pagehide” or “beforeunload” or "visibilitychange"?
Google Deprecating the unload event

@Garnet-Fox
Copy link
Author

Garnet-Fox commented Feb 12, 2024

I made a small fix because it’s urgent, it might be useful to someone. Do not judge strictly.
The "beforeunload" event seems to correctly calc the scrolling, but the scrolling itself is visible - unfortunately.
Event "pagehide" - failed to make friends with Safari, i.e. For the Chromium line everything is great, but in Safari the scroll calculation fails the first time you go back.
I've settled on "visibilitychange" for now, no critical bugs seem to be visible, currently browser support is 95%.
Instead of lines:
window[ addRemove ]( 'unload', this.unloadHandler );
Fix:
var _this = this;
function fix(e) {
if (document.visibilityState === "hidden") {
_this.unloadHandler.call(document, e);
}
}
document[ addRemove ]( 'visibilitychange', fix);

@cihankaracom
Copy link

cihankaracom commented Apr 23, 2024

I notice this problem for years. I decided to fix it. So i did it in this way:

First of all, use unminified version of js, after fixing minify it again.

Replace "proto.onUnload = function" function with this function:

proto.onVisibilityChange = function() {
  if (!this.scrollPage) return;
  if (this.scrollPage.top === 0) return;
  if (document.visibilityState === 'visible') return;

  // calculate where scroll position would be on refresh
  let scrollY = window.scrollY - this.scrollPage.top + this.top;
  // disable scroll event before setting scroll #679
  this.destroyHistory();
  scrollTo(0, scrollY);
};

also add this function below this function:

proto.bindVisibilityChangeEvent = function(isBind) {
  let addRemove = isBind ? 'addEventListener' : 'removeEventListener';
  window[addRemove]('visibilitychange', this.onVisibilityChange);
};

then find "proto.createHistoryAppend = function()" function, replace it this one:

proto.createHistoryAppend = function() {
  this.updateMeasurements();
  this.updateScroller();
  // array of scroll positions of appended pages
  this.scrollPages = [
    // first page
    {
      top: 0,
      path: location.href,
      title: document.title,
    },
  ];
  this.scrollPage = this.scrollPages[0];
  // events
  this.scrollHistoryHandler = this.onScrollHistory.bind( this );
  this.visibilityChangeHandler = this.onVisibilityChange.bind(this);
  this.scroller.addEventListener( 'scroll', this.scrollHistoryHandler );
  this.on( 'append', this.onAppendHistory );
  this.bindHistoryAppendEvents( true );
  this.bindVisibilityChangeEvent(true);
};

finally, replace "proto.bindHistoryAppendEvents = function(isBind)" function with this one:

proto.bindHistoryAppendEvents = function(isBind) {
  let addRemove = isBind ? 'addEventListener' : 'removeEventListener';
  this.scroller[addRemove]('scroll', this.scrollHistoryHandler);
  this.bindVisibilityChangeEvent(isBind);
};

I did not encounter any problems when I made changes this way. If you encounter any problems, I would appreciate it if you let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants