Iframe onload event when content is set from srcdoc

Question

How can i specify an onload property for an iframe loaded from srcdoc attribute. For example:

<iframe id="Content" runat="server" srcdoc="Large HTML contents that are set from the server"></iframe>

I'm using asp.net webforms to populate the content from another server.

However, the normal way to trigger onload for an iframe would be the following, but that won't work:

$(function () {

    var iframe = document.getElementById(DocumentViewer.GetFrameClientID());

    console.log({iframe}) // OK

    iframe.onload = function () { // Never Trigger unless i add a src attribute instead of srcdoc
        console.log('loaded')
    }
})

I found an issue reported on github in 2018 "load" event handler is called prematurely for iframe.srcdoc

Any clue?

Answer 1

A workaround that works for me (tested in current versions of Firefox and Chrome) is to set the srcdoc after having added the load listener, i.e. something like this:

<iframe title="..."></iframe>

const iframe = document.querySelector(`iframe`)

iframe.addEventListener(
    `load`,
    () => doSomethingWith(iframe.contentDocument),
)

iframe.srcdoc = `<p>The HTML code</p>`