iframe onload event not firing
Application Type
Reactive
Service Studio Version
11.10.16 (Build 40208)
Platform Version
11.0.614.2

Hi,

I added an HTML element with tag=iframe to my page in Reactive. The source of the iframe is loaded dynamically after user interaction.

I need to trigger a JS function once the iframe is fully loaded. Afaik, the common way to do it is to use the onload event of the iframe. I tried as below, and also in a JS block, but with no luck. It never seems to trigger the onload after the content of the iframe is loaded. 


This approach works with non-OutSystems examples I tried, so I wonder if this issue is related to OutSystems Reactive.

Any suggestions appreciated.

Ozan

mvp_badge
MVP
Solution

Hi Ozan,

For the stated use-case, follow the below-mentioned implementation steps

Steps:

  1. Define Screen OnReady Event handler
  2. Within the OnReady event handler client action flow, introduce a JS node with an input parameter, passing the iFrameId  value
  3. Use the below mentioned JavaScript code

JS Snippet:

var iFrameEle = document.querySelector('#' + $parameters.weatherIFrameId);

iFrameEle.onload = function() { 
    $actions.IFrameOnload();
};

See this sample app - iFrame onload event Demo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

RWALabiFrameDemo.oml

For future reference, I would like to share what I did to solve this issue.

My scenario is actually that I need to send the content of a RWA page to the print dialog.

Normally, I would render the page to be printed in a hidden iframe (that is located in the screen where the print dialog will be opened). When the page is fully loaded (by checking with the JS onload function as suggested above), I would transfer the content of the iframe to the print dialog.

This approach doesn't work good with RWA pages as they work with async calls (and the real "render finish" of it is not detectable by the iframe.onload event).

So I resorted on the "componentDidMount" JS event approach.

In my case, the RWA page that needs to be fully loaded consists only of a list with many items.

I check whether the last item of the list is loaded or not, with the following container:

And in the ComponentDidMount handler, I post a message like this:

This is to understand if loading of the page is finished; so there is a counterpart "window.onmessage" in the other screen where this page-to-be-printed is loaded into an iframe, to catch this message.

In the other screen with the iframe, after I assign the URL of the page-to-be-printed to the src of the iframe, I check if the same message ('iframe-loaded') is received or not; if received, I send the content of the iframe to print dialog:


This is how the app understands that the content of the iframe is fully loaded and ready for the subsequent work.

This approach works well with RWA pages with lists; to understand if e.g. the images in the page are loaded or not, it might not be enough as images are loaded async as well.

mvp_badge
MVP
Solution

Hi Ozan,

For the stated use-case, follow the below-mentioned implementation steps

Steps:

  1. Define Screen OnReady Event handler
  2. Within the OnReady event handler client action flow, introduce a JS node with an input parameter, passing the iFrameId  value
  3. Use the below mentioned JavaScript code

JS Snippet:

var iFrameEle = document.querySelector('#' + $parameters.weatherIFrameId);

iFrameEle.onload = function() { 
    $actions.IFrameOnload();
};

See this sample app - iFrame onload event Demo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

RWALabiFrameDemo.oml

Thanks, Benjith! I was able to trigger the onload event this way.

However, in my case it is triggered immediately after the URL is assigned to the src of the iframe. 

Could the reason for this be the fact that I load a reactive OS page in that iframe, and it works with async calls (and the real "render finish" of it is not detectable by the iframe onload) ?

mvp_badge
MVP

Hi Ozan,

I tried the same case as mentioned i.e. setting the iFrame Url value as RWA screen url and it's working fine in my case (the onload event get triggered). See this sample app - iFrame onload event Demo

Sorry! I don't have any concrete reason/explaination for the below statement:

Could the reason for this be the fact that I load a reactive OS page in that iframe, and it works with async calls (and the real "render finish" of it is not detectable by the iframe onload) ?


Kind regards,

Benjith Sam

Indeed, the onload gets triggered; but immediately after the URL is assigned and not actually after the iframe is fully loaded.

It probably has something to do with the URL belonging to a RWA page. I will look into this, thanks!

For future reference, I would like to share what I did to solve this issue.

My scenario is actually that I need to send the content of a RWA page to the print dialog.

Normally, I would render the page to be printed in a hidden iframe (that is located in the screen where the print dialog will be opened). When the page is fully loaded (by checking with the JS onload function as suggested above), I would transfer the content of the iframe to the print dialog.

This approach doesn't work good with RWA pages as they work with async calls (and the real "render finish" of it is not detectable by the iframe.onload event).

So I resorted on the "componentDidMount" JS event approach.

In my case, the RWA page that needs to be fully loaded consists only of a list with many items.

I check whether the last item of the list is loaded or not, with the following container:

And in the ComponentDidMount handler, I post a message like this:

This is to understand if loading of the page is finished; so there is a counterpart "window.onmessage" in the other screen where this page-to-be-printed is loaded into an iframe, to catch this message.

In the other screen with the iframe, after I assign the URL of the page-to-be-printed to the src of the iframe, I check if the same message ('iframe-loaded') is received or not; if received, I send the content of the iframe to print dialog:


This is how the app understands that the content of the iframe is fully loaded and ready for the subsequent work.

This approach works well with RWA pages with lists; to understand if e.g. the images in the page are loaded or not, it might not be enough as images are loaded async as well.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.