Получение url-адресов из ссылок на изображения в javascript - PullRequest
Новая
       28

Получение url-адресов из ссылок на изображения в javascript

0 голосов
/ 19 июня 2020

Мне нужно смоделировать переходы между страницами на изношенном сайте wordpress с раздутой темой и множеством страниц и скриптов, создавая библиотеки вроде barba / swup / Highway / et c. их сложно модернизировать, так как они требуют перезапуска сценариев после переходов, а поиск их всех и повторная инициализация в этих библиотеках - большая головная боль. с 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, и приведенный выше код был скомпонован из нескольких разных потоков и адаптирован к этому варианту использования.

...