Question

我需要在一个主题theme肿且带有大量页面和脚本的破旧的wordpress网站上模拟页面转换，从而制作出像barba / swup / highway / etc之类的库。由于它们需要在过渡后重新启动脚本，因此很难进行翻新，而将它们全部搜寻下来并在这些库中重新启动它们是一件令人头疼的事。

我本质上是在伪造过渡效果，到目前为止，我已经使用GSAP和CSS进行了很好的处理。我正在监视页面上的链接单击，拦截单击，做一些GSAP，重定向URL并完成CSS效果。（从UX的角度来看，我知道这是不必要的时间浪费，客户不在乎。）

问题是图像链接。我正在使用的javascript返回null类似于

<a href="https://example.com><img src="img.jpg"></a>

<a href="https://example.com/some-page/">
    <div class="img-wrapper">
        <img src="img.jpg">
    </div>
</a>

文本链接都可以正常工作。

JavaScript


// identify links
function findLink(el) {
    if (el.tagName == 'A' && el.href) {
        return el.href;
    } else if (el.parentElement) {
        return findLink(el.parentElement);
    } else {
        return null;
    }
};

// intercept link click
function callback(e) {
    const link = findLink(e.target);
    if (link == null) { return; }
    e.preventDefault();
    setTimeout(function(){
        window.location.assign(e.target.getAttribute('href'));
        console.log(e.target.getAttribute('href'));
    }, 1000);  

// animation

var tl = gsap.timeline();

tl.to(".wipe", {duration: 1.2, scaleX: 1, transformOrigin: 'left', ease: Power4.easeInOut});
tl.to(".wipelogo", {duration: .5, autoAlpha:1, ease: Power4.easeInOut}, .5);
tl.set(".wipe", {scaleX:0});
tl.to(".wipelogo", {duration: .2, autoAlpha: 0}, '-=1');

};

// click event
document.addEventListener('click', callback, false);

jQuery(document).ready( function() {
  document.getElementById("preloaderoverlay").classList.add("is-loaded"); // this triggers some CSS animation stuff
});

上面的console.log在文本链接上显示正确的链接目标，但显示带有图像链接的null。当我单击图像链接时，URL更改为https://example.com/current-page/null

我知道我应该展示自己尝试过的东西，但是除了在这里和google中搜索并挠头之外，我不知道该尝试什么。我承认我对javascript不好，并且上面的代码已经从几个不同的线程拼凑而成，并适应了这种用例。

从javascript中的图片链接获取网址

0 个答案: