检测iframe内容何时加载

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

所以我有一个小的反应组件,呈现一个iframe。我需要确定所有内容(html等)何时完全加载。

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

iframe正在加载orbeon表单,可能需要几秒钟才能完全加载。

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.

我已经尝试连接到iframe的'load'事件,但是iframe加载时甚至是第二个iframes内容加载时触发了if。

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

我已经阅读了一些有关收听'DOMContentLoaded'的帖子,但似乎无法让它工作。

here is the react component which renders the Iframe.

这是呈现Iframe的react组件。

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

基本上我需要在呈现所有iframe内容后触发documentDrawerLoaded函数。

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>;
        },

    });

2 个解决方案

#1

You can use Jquery for that:

您可以使用Jquery:

$(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?

如示例中所示:如何检测iframe是否已加载?

#2

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.

如果您正在控制iframe的内容,则可以使用跨源通信。或者换句话说,iframe中的网站知道其内容何时完全加载并将该信息广播到父页面。

#1