檢測何時加載iframe內容

Question

所以我有一個小的反應組件，它呈現一個iframe。 我需要確定何時所有內容（html等）都已完全加載。

iframe正在加載orbeon表單，這可能需要幾秒鍾才能完全加載。

我試過將iframe插入“ load”事件，該事件可以正常工作，但會觸發第二次iframe加載，而不是在iframe內容加載時觸發。

我已經閱讀了一些有關收聽“ DOMContentLoaded”的文章，但似乎無法使其正常工作。

這是呈現Iframe的react組件。

基本上，一旦所有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>;
        },

    });

Answer 1

您可以為此使用Jquery：

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

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

如示例所示： 如何檢測是否加載了iframe？

Answer 2

如果您要控制iframe的內容，則可以使用跨域通訊 。 換句話說，iframe中的網站知道何時完全加載其內容並將該信息廣播到父頁面。