Вопрос по onVisibilityChange
 

Привет.

const onVisibilityChange = () => {
    if (document.visibilityState === 'visible'){ 
        console.log('active')
    }else{            
        console.log('hiden')       
    }
}
document.addEventListener('visibilitychange', onVisibilityChange);

Почему при перезагрузки страницы она в состоянии 'hiden'? И можно ли как то это поправить?

Довольно странный вопрос...
Даже вопрос "Почему небо синее" звучит более научно. :)

Ответ будет такой - это так работает.

Если только написать свой браузер...

Возможно для такого просвещённого как вы, вопрос действительно странный, но я не вижу в этом странности). Рассуждая логически, если страница видна, то должен быть не hiden. Отсюда был и вопрос. Но видимо в программировании не всегда работает логика))). Тогда с другой стороны. Можно ли заставить работать это событие только после окончания перезагрузки? Что то типа этого

const pageAccessedByReload = (
    (window.performance.navigation && window.performance.navigation.type === 1) ||
      window.performance
        .getEntriesByType('navigation')
        .map((nav) => nav.type)
        .includes('reload')
  );

  if(pageAccessedByReload==true){
    window.location.hash='reload'
  }else{

  }
  document.addEventListener("DOMContentLoaded", function(event) { 
    if(window.location.hash=='#reload'){
        document.addEventListener('visibilitychange', onVisibilityChange);
    } 
  })

Но так не работает)

Для меня решение, это использовать $(window).focus() оно не реагирует на перезагрузку страницы.

Нет. На короткое время страница становится невидимой. Она выгружается, все ресурсы освобождаются, и загружается заново. Часто при новой загрузке она берется из кеша в оперативной памяти, без обращения к серверу, поэтому это очень быстро. Но это не отменяет факт, что старая версия страницы выгружается и становится невидимой.

Установка только якоря не вызывает перезагрузку страницы, а только скроллинг к этому якорю, если он есть.

Ааа, вот теперь понятно. Большое спасибо). Тогда почему не работает такой вариант?

document.addEventListener('visibilitychange', function() {
    console.log(this.visibilityState);
    if(this.visibilityState =='visible'){
        foo(true); 
    }else{
        foo(false); 
    }
  }, false);


function foo(param){
if(!param)return false;
console.log('true')
}

В каком смысле не работает? Чего он не делает из того, что должен бы был делать?

Разобрался. Спасибо).

Твоя логика. ;)