Внедренное приложение-прототип Adobe XD заставляет страницу «перескочить» на середину страницы после загрузки - PullRequest
Новая
       82

Внедренное приложение-прототип Adobe XD заставляет страницу «перескочить» на середину страницы после загрузки

0 голосов
/ 30 января 2020

Я использую Squarespace для своего сайта портфолио. У них есть «блок», который позволяет мне использовать встроенный код Adobe XD (ниже), чтобы показать прототип моего приложения. Прототип работает нормально, но когда страница загружается, он автоматически перемещается на половину страницы вниз к прототипу. ссылка на страницу 

<center>
<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0">
</iframe>
</center>

Я бы хотел, чтобы моя страница оставалась вверху при полной загрузке, а не спрыгивал с середины страницы к прототипу. Я пробовал бесчисленные решения, такие как использование песочницы, отложенной загрузки и загрузки в режиме прокрутки. Я также попытался использовать «data src =» «» среди других опций.

К сожалению, ни одно из этих решений не сработало. Единственный раз, когда он не прыгает вниз к прототипу, это когда он вообще не загружается (что произошло с отложенной загрузкой, загрузкой по прокрутке). Как я могу это исправить? Я также могу использовать HTML, CSS и JavaScript.

Мое лучшее предположение - отложить загрузку прототипа, пока он не появится на виду. Единственным другим вариантом будет размещение прототипа в верхней части страницы, а это не то, что мне нужно (это портит ход проекта).

Любая помощь очень ценится!

1 Ответ

0 голосов
/ 30 января 2020

Вариант 1: используйте атрибут «песочница».

Это, вероятно, известная проблема в сайте Adobe Community , решение которого предлагается с использованием песочницы атрибут iframe. 

<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts"></iframe>

Или, возможно, еще более ограничительный (что может привести к тому, что iframe не будет работать): 

<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" sandbox></iframe>


Вариант 2 : Используйте атрибут «onload» с «scroll ()»

Если ни один из вышеперечисленных способов не работает, вы можете попробовать использовать атрибут onload для принудительной установки позиции прокрутки: 

<iframe id="nautilab" width="414" height="736" src="https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982" allowfullscreen" frameborder="0" onload="scroll(0,0);"></iframe>


Вариант 3: Загружать iframe только при просмотре.

Если ни один из вариантов 1 или 2 не работает, вы можете загружать iframe только тогда, когда он уже просматривается для пользователя ( как только они прокрутились вниз). Для браузеров, которые не поддерживают IntersectionObserver , сохраните внешнюю ссылку, как она есть. Для браузеров, которые делают, скрыть ссылку и загрузить iframe. Вставьте следующее через блок кода над блоком изображения, который имеет вашу внешнюю ссылку: 

<iframe id="nautilab" width="0" height="0" frameborder="0" allowFullScreen></iframe>

Затем вставьте следующее с помощью инъекции кода нижнего колонтитула 

<script>
(function() {
    var target,
        io,
        ioCallback,
        ioOptions,
        linkBlock;

    // Exit if id "nautilab" not found.
    target = document.querySelector('#nautilab');
    if (!target) {
        return;
    }

    // Check for IntersectionObserver Support: https://github.com/w3c/IntersectionObserver/issues/296#issuecomment-452230176
    if (!('IntersectionObserver' in window) ||
        !('IntersectionObserverEntry' in window) ||
        !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
        target.style.display = "none";
        return;
    }

    // Because IntersectionObserver is supported, hide external link to prototype.
    linkBlock = document.querySelector('#block-yui_3_17_2_1_1574114822673_377170');
    linkBlock.style.display = "none";

    // Loads the iframe when the 'target' is in view.
    ioCallback = function(entries, observer) { 
        entries.forEach(function(entry) {
            if (entry.intersectionRatio) {
                observer.disconnect();
                target.height = "736"
                target.width = "414";
                target.src = "https://xd.adobe.com/embed/afb3c48a-11a6-4296-73d9-068cd5b0c5ef-d982";
            }
        });
    };

    ioOptions = {
        root: null,
        rootMargin: "0px",
        threshold: 1
    };

    // Observe for 'target' to be in view.
    io = new IntersectionObserver(ioCallback, ioOptions);
    io.observe(target);

})();
</script>

Вам все равно придется центрируйте прототип, используя CSS, что не должно быть слишком сложным.

...