javascriptevent-handlingonload-event

Why window.onload is not firing if it is not a current tab?

I have the href attribute(another page) on my home page. another page's on-load function works fine if I click on it. in case if I do with (control + left click on the link), or (right-click -> open in new tab), on-load function not fired if it was not my active or current tab. if I switch into that particular tab immediately, it works fine as usual. my question is, will it not work if it is not our current tab. any alternative solution for it. thanks 

 window.onload = swipe();         
            function swipe() {              
              
                if (window.outerWidth > 1024) {

                    var slider = document.getElementsByClassName("cards")[0];
                    var isDown = false;
                    var startX;
                    var scrollLeft;
                    slider.addEventListener('mousedown', function (e) {
                        isDown = true;
                        startX = e.pageX - slider.offsetLeft;
                        scrollLeft = slider.scrollLeft;
                        e.preventDefault();
                    });
                    slider.addEventListener('mouseleave', function () {
                        isDown = false;
                    });
                    slider.addEventListener('mouseup', function () {
                        isDown = false;
                    });
                    slider.addEventListener('mousemove', function (e) {
                        if (!isDown) return;
                        e.preventDefault();
                        var x = e.pageX - slider.offsetLeft;
                        var walk = (x - startX) * 3;

                        slider.scrollLeft = scrollLeft - walk;
                    });
                }

                var swipe_sec = document.getElementsByClassName("cards")[0];

                function calc_prog(winScroll, width) {
                    var scrolled = ((winScroll) / width) * 100;
                    document.getElementById("t_art_prog").style.width = scrolled + "%";

                }

                var winScroll = swipe_sec.clientWidth;
                var width = swipe_sec.scrollWidth - swipe_sec.clientWidth;
                calc_prog(winScroll, width);

                swipe_sec.addEventListener("scroll", function () {
                    var winScroll = swipe_sec.scrollLeft + swipe_sec.clientWidth;
                    var width = swipe_sec.scrollWidth;
                    calc_prog(winScroll, width);
                });
            }

Solution

  • The problem is not with window.onload, it is with if (window.outerWidth > 1024), window.outerWidth will be 0 when you open in a new tab.

    Two solutions I can think of -

    1. Use window.visualViewport.width instead of window.outerWidth

    2. Try using focus event like this -

      window.addEventListener('focus', function(){ ... });

      Note - Focus event will be triggered every time when you switch to the tab, you have to control it to execute only once.