Can't get it to work with iFrameResizer

[daniser]

iFrameResizer works perfectly with native lazy loading functionality in supported browsers. But I can't get it to work along with this polyfill. I think it is due to <noscript> tag usage, but I'm not sure.

I've tried following combinations to no avail:

<noscript class="loading-lazy">
    <iframe id="container" src="..." loading="lazy"></iframe>
    <script type="text/javascript">iFrameResize({}, '#container')</script>
</noscript>

<noscript class="loading-lazy">
    <iframe id="container" src="..." loading="lazy"></iframe>
</noscript>
<script type="text/javascript">iFrameResize({}, '#container')</script>

The last one works when contents of the <iframe> is loaded instantly, but not with lazy loading:

<noscript class="loading-lazy">
    <iframe id="container" src="..." loading="lazy" onload="iFrameResize({}, this)"></iframe>
</noscript>

It'd be great if there was a way to register callback function which fires when <iframe> is actually loaded, like this:

loadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'), function () {
    iFrameResize({}, '#container');
});

[mfranzke]

@daniser thanks a lot for your feedback.

Actually I would expect that the following wouldn't work, as the script tag within a noscript tag might lead to problems:

<noscript class="loading-lazy">
    <iframe id="container" src="..." loading="lazy"></iframe>
    <script type="text/javascript">iFrameResize({}, '#container')</script>
</noscript>

And I've followed up with the following code in a JSBin and that works fine, even with a resize after load by the onload attribute:

<noscript class="loading-lazy">
    <iframe id="container" src="..." loading="lazy" onload="iFrameResize({}, this)"></iframe>
</noscript>

Could you please elaborate further whether this might be a browser specific problem? What's the environment you've tested with (and could you please test with the setup / link I've provided)?

[daniser]

I have tab system which manipulates each tab visibility with display CSS property. One of tabs contains iframe, which must be loaded only when tab is clicked. Here is an example that resembles my scenario more closely. Here is the same example without initial display: none on parent DIV. Both examples work flawlessly on Chrome with native lazy loading support. But in Firefox, only second example works; and more strangely, it works only until page refresh (F5). Console output:

"[iFrameSizer][Nested host page: container]"
"Ignored iFrame, already setup."

P.S. Very interesting On Firefox onload handler is called twice - first time on page load, second time on button click. P.P.S. Temporary solution for my use case.