detect when iframe content has loaded

Question

So i have a small react component which renders an iframe. I need to determine when all the content (html etc) has fully loaded.

The iframe is loading an orbeon form which can takes a few seconds to fully load.

I have tried hooking into the 'load' event form the iframe which works but triggers the even the second the iframe is loaded and not when the iframes content has loaded.

I have read some posts about listening to the 'DOMContentLoaded' even but cannot seem to get that to work.

here is the react component which renders the Iframe.

basically I need to trigger the documentDrawerLoaded function once all of the iframe content has been rendered.

return React.createClass({
        displayName: 'FilePickerColourSelector',

        getInitialState: function() {
            return {
                listVisible: false
            };
        },

        componentWillMount: function () {
            console.log('loading...')
        },

        componentDidMount: function () {
        this.refs.documentDrawer.getDOMNode().addEventListener('load', this.documentDrawerLoaded);

        },

        documentDrawerLoaded: function () {
            console.log('drawer has been loaded');
            document.getElementById('js-document-drawer-overlay').classList.toggle('active');
            document.getElementById('js-document-drawer').classList.toggle('active');
        },

        render: function() {
            var documentDrawerStyles = {
                height: '100%',
                width: '100%',
                border: 'none'
            }

            return <iFrame 
                        src={this.props.url} 
                        style={documentDrawerStyles} 
                        ref="documentDrawer"
                        scrolling="no"
                    >
                    </iFrame>;
        },

    });

score 0 · Answer 1 · answered Dec 22 '16 at 15:42

0

If you are controlling the content of the iframe you may use cross-origin communication. Or in other words the site in your iframe knows when its content is fully loaded and broadcast that information to the parent page.

answered Dec 22 '16 at 15:42

Krasimir

13,306
3
40
55

score -4 · Answer 2 · edited May 23 '17 at 12:08

-4

You can use Jquery for that:

$(function(){
    $('#MainPopupIframe').on('load', function(){
        $(this).show();
        console.log('load the iframe')
    });

    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'http://heera.it');    
    });
});

as see in the example: How can I detect whether an iframe is loaded?

edited May 23 '17 at 12:08

Community

1
1

answered Aug 02 '16 at 16:57

Sergio Lopes

52
8

I mentioned in the OP that I have already tried the 'on.load()' event. It doesn't tell me when all of the content within the iFrame has loaded. – chinds Aug 02 '16 at 17:02
Even when you especify the iframe to look? – Sergio Lopes Aug 02 '16 at 17:05
yup seems to be unless I have been doing something wrong. – chinds Aug 02 '16 at 17:06
1

You try using, like in the example, with a dynamic content: Update: Also you can try this (dynamic iframe) $(function(){ $('#click').on('click', function(){ var ifr=$('', { id:'MainPopupIframe', src:'http://heera.it', style:'display:none', load:function(){ $(this).show(); alert('iframe loaded !'); } }); $('body').append(ifr); }); }); – Sergio Lopes Aug 02 '16 at 17:06
hmm ill give that a try later on. Thanks for the help so far. – chinds Aug 02 '16 at 17:07
Try to use this example to, is for React code: https://developer.zendesk.com/blog/rendering-to-iframes-in-react – Sergio Lopes Aug 02 '16 at 17:12
as cool as that is its not for rendering external content, its for wrapping a react component inside an iframe. – chinds Aug 02 '16 at 18:57

detect when iframe content has loaded

2 Answers2