Question

我正在建立自己的网站，在某些情况下，我希望通过ajax调用来更改页面。更改本身是有效的，但要使下一页正常工作，我需要再次初始化文档，这是我的问题。

我想我必须在某个时候重新运行init函数，但是每次尝试尝试都没有达到预期的结果

这是我的代码： ---- JS + GreenSock库---- 在文档readystate完成时，我运行我的init函数，并根据我要进入的页面进行了大小写切换。这是我的Ajax页面更改功能。这是HTML部分：

<body class="bodyHome">
    <div class="contenitore">

        <section class="contenuto">

            <header class="headerHome">
                <h2 class="logoInit">MN</h2>
                <h1 class="logoDesc">MyName<br> Web-Designer</h1>
            </header>
            <nav class="menu">
                    <ul class="menuul">
                        <li class="menuitm"><a class="menuopt link-ajax" href="index.html">home</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax anchor" href="about.html">about</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax" href="#">jobs</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax" href="#">contacts</a></li>
                    </ul>
            </nav>
        </section>

    </div>

        <footer class="foothome">
*irrelevant code*
        </footer>


*links to GSAP and then to my js file*
    </body>

这是JS部分

function ingrPage() {

    var linkAjax = document.getElementsByClassName("link-ajax");

    events();


    function events() {

        for (let i = 0; i < linkAjax.length; i++) {

            linkAjax[i].addEventListener("click", function (e) {
                e.preventDefault();
                window.console.log("click link --->", linkAjax[i].getAttribute('href'));

                getPage(linkAjax[i].getAttribute('href'));

                return false;

            });

        }
    }

    function getPage(link = null) {
        if (link !== null) {
            fetch(link)
                .then(response => {
                    if (response.ok) {
                        return Promise.resolve(response);




                    } else {
                        return Promise.reject(new Error('Failed to load'));
                    }
                })
                .then(response => response.text()) // parse response as JSON
                .then(data => {
                    // success
                    history.pushState("", "", link);
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(data, "text/html");
                    let newTarget = doc.getElementsByClassName('contenitore');
                    let oldTarget = document.getElementsByClassName('contenitore');
                    newTarget = newTarget[0];
                    oldTarget = oldTarget[0];
                    window.console.log('ok data ---> ', newTarget);
                    TweenLite.to(oldTarget.getElementsByClassName('contenuto')[0], 0.5, {
                         autoAlpha: 0
                     });
                    TweenLite.set(newTarget.getElementsByClassName('contenuto')[0], {
                        autoAlpha: 0
                    });
                    setTimeout(() => {
                        oldTarget.append(newTarget.getElementsByClassName('contenuto')[0]);
                        console.log("cambio eseguito");
                        TweenLite.to(oldTarget.getElementsByClassName('contenuto')[1], 0.5, {
                            autoAlpha: 1
                        });

                        oldTarget.getElementsByClassName('contenuto')[0].remove(); 
                    }, 550)
                })

                .catch(function (error) {
                    console.log(`Error: ${error.message}`);
                });


        }
    }}

在更改ajax页面后，我应该如何再次初始化文档以使其正常工作？谢谢！

Ajax页面更改后如何再次初始化

0 个答案: