Cannot edit components in author editor mode until iframe load | Community
Skip to main content
J
Julkar__Naim
Level 2
March 25, 2024
Solved

Cannot edit components in author editor mode until iframe load

  • March 25, 2024
  • 2 replies
  • 756 views

Hi everyone,


I have created a simple custom iframe component as such - 

<iframe id="iframe-test" class="embed-iframe iframe-main" src="${properties.url}" style="width:100%;border:none;" allowfullscreen> </iframe>

 
In editor mode I am unable to edit other components while this iframe component is loading. Is it possible to make this iframe loading asynchronous in editor mode? so that I can author other components while this iframe is loading? The iframe behaves asynchronously in view as published mode and in publisher. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Raja_Reddy

Hi @julkar__naim 
To make the iframe loading asynchronous in editor mode, you can use JavaScript to load the iframe after the rest of the page has finished loading.

window.addEventListener('DOMContentLoaded', function() { var iframe = document.getElementById('iframe-test'); iframe.src="${properties.url}"; });

By using the DomcontentLoaded event, the iframe will only start loading after the rest of the page has finished loading. This allows you to author other components while the iframe is loading asynchronously.

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
March 25, 2024

Hi @julkar__naim 
Yes, using javascript you can load Iframe asynchronsly 

https://stackoverflow.com/questions/2114239/load-an-iframe-asynchronously 

Arun Patidar
    Raja_Reddy
    Community Advisor
    Raja_ReddyCommunity AdvisorAccepted solution
    Community Advisor
    March 25, 2024

    Hi @julkar__naim 
    To make the iframe loading asynchronous in editor mode, you can use JavaScript to load the iframe after the rest of the page has finished loading.

    window.addEventListener('DOMContentLoaded', function() { var iframe = document.getElementById('iframe-test'); iframe.src="${properties.url}"; });

    By using the DomcontentLoaded event, the iframe will only start loading after the rest of the page has finished loading. This allows you to author other components while the iframe is loading asynchronously.

      Terms & ConditionsAccessibility statement

      Loading footer...