Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Cannot edit components in author editor mode until iframe load

Avatar

Level 2

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. 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.



View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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.