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

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!

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