Javascript AdobeXD嵌入式应用程序原型导致页面'；跳转'；加载后向下至页面中间

我使用Squarespace作为我的投资组合站点。他们有一个“块”，允许我使用嵌入的Adobe XD代码（如下）来显示我的应用程序原型。原型工作正常，但当页面加载时，它会自动将页面向下移动一半到原型

选项1：使用“沙盒”属性。
这似乎是内部的一个已知问题，使用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>



选项3：仅在视图中加载iframe。
如果选项1或2都不起作用，则只能在iframe已经在用户的视图中（在用户向下滚动后）加载iframe。对于不支持的浏览器，请保留现有的外部链接。对于这样做的浏览器，隐藏链接并加载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>


（功能（）{
var目标，
木卫一，
ioCallback，
ioOptions，
连接块；
//如果找不到id“nautilab”，则退出。
target=document.querySelector（“#nautilab”）；
如果（！目标）{
返回；
}
//检查IntersectionObserver支持：https://github.com/w3c/IntersectionObserver/issues/296#issuecomment-452230176
如果（！（“IntersectionObserver”在窗口中）||
！（“窗口”中的“IntersectionObserverEntry”）||
！（'intersectionRatio'在window.IntersectionObserverEntry.prototype中）{
target.style.display=“无”；
返回；
}
//因为支持IntersectionObserver，所以隐藏到prototype的外部链接。
linkBlock=document.querySelector（'block-yui_3_17_2_1_157414822673_377170'）；
linkBlock.style.display=“无”；
//当“目标”在视图中时加载iframe。
ioCallback=函数（条目，观察者）{
entries.forEach（函数（entry）{
if（条目相交比率）{
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”，
阈值：1
};
//观察“目标”是否在视野内。
io=新的IntersectionObserver（ioCallback，ioOptions）；
观察（目标）；
})();

您仍然需要使用CSS将原型居中，这应该不会太困难。
是的，这是我尝试的第一件事，但不幸的是，它没有起作用。我试着在W3Schools上查找“sandbox”，看看是否还有关于“sandbox”的其他内容，但没有找到任何内容。您是否也尝试过将
sandbox=“…”
替换为简单的
sandbox
（即完全删除等号、引号和属性值）？这可能会导致iframe出现故障，但这将是我下一步尝试的事情。第三，另一个选项是使用
onload
属性。请参阅上面更新的答案。是的，我只是尝试使用“沙盒”，但它仍然将页面向下推。“onload”属性的结果相同。我只是要删除原型，并用一个链接替换它，该链接指向在新窗口中打开的原型。谢谢你的帮助。似乎是Adobe方面需要解决的一个问题。这在@txroy001中是有意义的。不过，还有另一种选择，您可以保留原型的外部链接。只需在上面添加一个代码块，并在更新的答案中查看上面的选项3。
<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>

<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>