检查项目是否在 DOM 和执行 javascript 函数时出现问题

Question

我正在制作一个具有两个不同导航栏的网页...假设我将它们命名为 navbar1 和 navbar2.. 所以 navbar1 在网站的主页上使用，navbar2 在所有其他子页面上使用...我写了一个纯 Javascript 函数来检查 navbar1 是否存在于 DOM 中，如果存在则它会做一些事情...如果 navbar1 不存在于 DOM 中它应该忽略那部分代码并继续处理其余部分...

所以现在我遇到了这个问题，我花了几个小时试图解决...我可以弄清楚...当我转到主页时，代码可以正常工作...应该发生的一切到 navbar1 发生...但是如果我转到不使用 navbar1 的子页面，我会在控制台中收到此错误：“无法读取 null 的属性（读取 'getBoundingClientRect'）

我希望得到一些帮助...如果这很重要，我对 javascript 没有太多经验，所以 :)

所以这是我的 JS 代码...

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)
        );
    };

    if (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) {
                document.getElementById("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 {
                document.getElementById("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");

});

Answer 1

如果元素不存在，

isInViewport() 应该 return false。

    var isInViewport = function (elem) {
        if (!elem) {
            return false;
        }
        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)
        );
    };

检查项目是否在 DOM 和执行 javascript 函数时出现问题

Issue with checking if item is in DOM and the executing the javascript function

html

javascript

dom