0

我将 Squarespace 用于我的投资组合网站。他们有一个“块”，允许我使用嵌入的 Adob​​e 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。

我最好的猜测是延迟加载原型，直到它出现。唯一的其他选择是将原型放在页面顶部，这不是我想要的（它会打乱项目的流程）。

任何帮助是极大的赞赏！

4

1 回答 1

0

选项 1：使用“沙盒”属性。

这似乎是Adob​​e 社区站点中的一个已知问题，建议使用沙盒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 使原型居中，这应该不会太难。

于 2020-01-30T14:19:43.777 回答