Question

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

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

我试过勾住“负载”。事件形成iframe，但是if if第二个加载了iframe，而不是iframe内容加载时。

我已经阅读了一些关于收听＆＃39; DOMContentLoaded＆＃39;即便但似乎无法让它发挥作用。

这是呈现Iframe的反应组件。

基本上我需要在呈现所有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');    
    });
});

如示例中所示： How can I detect whether an iframe is loaded?

Answer 2

如果您要控制iframe的内容，可以使用cross-origin communication。或者换句话说，iframe中的网站知道其内容何时完全加载并将该信息广播到父页面。

检测iframe内容何时加载

2 个答案: