0

I use Squarespace for my portfolio site. They have a "block" that allows me to use embedded Adobe XD code (below) to show my app prototype. The prototype works fine but when the page loads, it automatically shifts half way down the page to the prototype. link to page

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

I would like for my page to remain at the top when fully loaded instead of jumping down mid-page to the prototype. I've tried countless solutions such as using sandbox, lazy loading, and loading on scroll view. I've tried using "data src=""" as well among other options.

Unfortunately none of these solutions worked. The only time it doesn't jump down to the prototype is when it doesn't load at all (which happened with lazy loading, loading on scroll). How can I fix this? I'm able to use HTML, CSS, and JavaScript as well.

My best guess is to delay loading the prototype until it's in view. The only other option would be placing the prototype at the top of the page, which is not what I want (it messes up the flow of the project).

Any help is greatly appreciated!

Brandon
  • 3,572
  • 2
  • 12
  • 27
txroy001
  • 1
  • 1

2 Answers2

0

Option 1: Use the "sandbox" attribute.

This appears to be a known issue within the Adobe Community site, with a solution proposed using the sandbox iframe attribute.

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

Or, possibly even more restrictive (which may cause the iframe not to work):

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


Option 2: Use the "onload" attribute with "scroll()"

If neither of the above work, you could try using the onload attribute to force the scroll position:

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


Option 3: Load the iframe only when in view.

If neither option 1 or 2 work, you could only load the iframe once it is already in view for the user (once they have scrolled down). For browsers that don't support IntersectionObserver, keep the external link as you have it. For browsers that do, hide the link and load the iframe. Insert the following via a code block above the image block that has your external link:

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

Then insert the following via sitewide footer code injection

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

You'll still have to center the prototype using CSS, which shouldn't be too difficult.

Brandon
  • 3,572
  • 2
  • 12
  • 27
  • Yes, that was the first thing I tried, but unfortunately it didn't work. I tried looking up "sandbox" on W3Schools to see if there was anything else I could try in regards to "sandbox" but didn't find anything. – txroy001 Jan 30 '20 at 14:34
  • Did you also try replacing `sandbox="..."` with simply `sandbox` (that is, removing the equals sign, the quotes, and the attribute value entirely)? That may cause the iframe to malfunction, but that would be the next thing I would try. – Brandon Jan 31 '20 at 15:20
  • And, thirdly, another option is to use the `onload` attribute. See updated answer above. – Brandon Jan 31 '20 at 16:22
  • Yes, I tried simply using just "sandbox" but it still pushed the page down. Same results with the "onload" attribute. I'm just going to remove the prototype, and replace it with a link to the prototype that opens in a new window. Thanks for your help though. Seems to be an issue on Adobe's end they need to fix. – txroy001 Feb 01 '20 at 18:45
  • That makes sense @txroy001. There is another option though, and you can leave the external link to the prototype as you have. Just add a code block above it and see option 3 above in the updated answer. – Brandon Feb 03 '20 at 14:12
  • Thanks for sharing, I appreciate the effort. Unfortunately the prototype didn't load when I added the code block from option 3. I viewed it on Firefox, Safari, and Chrome but it didn't load. I tried "loading when only in view" before and it didn't work. Maybe it's something to do with Squarespace or Adobe. – txroy001 Feb 04 '20 at 16:18
  • I should have mentioned that the ` – Brandon Feb 04 '20 at 16:42
  • Thank you for clarifying. I tried it this way and it worked on Safari. Unfortunately it didn't work on Firefox though. It still pushed down to the prototype. For consistency across browsers I'm going to keep the it as is for now (with just the link). – txroy001 Feb 05 '20 at 19:04
0

adding the attribute loading="lazy" to the iframe seems to work as of March 2023

I never added sandbox at all and it works - no custom JS code required

Declan Kay
  • 86
  • 5