检查DOM元素存在性再执行JS函数时出现getBoundingClientRect空值报错问题

子页面不存在navbar1元素时，document.getElementById('navbar1')会返回null，你没有预先判断navbar1是否为有效DOM元素，就直接将它传入isInViewport函数调用getBoundingClientRect方法，所以会触发Cannot read properties of null (reading 'getBoundingClientRect')报错。

在运行navbar1相关逻辑前先判断navbar1是否存在，修改后的完整代码如下：

function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    var className = "scroll";
    var scrollTrigger = 60;
    var navTogler = document.getElementById('navbar-toggler');
    var navbar1 = document.getElementById('navbar1');

    var isInViewport = function (elem) {
        var bounding = elem.getBoundingClientRect();
        return (
            bounding.top >= 0 &&
            bounding.left >= 0 &&
            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    // 新增判断：navbar1存在时才执行后续相关逻辑
    if (navbar1 && isInViewport(navbar1)) {
        navTogler.addEventListener('click', classToggle);

        function classToggle() {
            navbar1.classList.toggle('has-bg');
            if (navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
            else {
                // console.log("something");
            }
        }

        window.onscroll = function() {
            if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
                // 直接用已定义的navbar1变量，避免重复查询DOM
                navbar1.classList.add(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            else {
                navbar1.classList.remove(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
        };
    }

    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        grid: {
            rows: 2,
        },
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });

    console.log("hello swiper");

});

如果子页面也可能不存在swiper对应的DOM元素，可以在初始化swiper前加一层判断：if(document.querySelector('.mySwiper'))再执行初始化逻辑，避免后续出现同类报错。

内容的提问来源于stack exchange，提问作者weinde