在反应组件中设置 iframe 样式答案

【问题标题】：styling iframe in react component在反应组件中设置 iframe 样式
【发布时间】：2016-09-30 18:28:49
【问题描述】：

我有以下代码。首次加载时，它成功地将页面的页眉和页脚隐藏在 iframe 中。但是，当我通过在 iframe 中导航来与 iframe 进行交互时，页眉和页脚总是会短暂闪现。第三行的函数永远不会触发，我不确定为什么不触发。感谢您的帮助！

componentDidMount() {
    $('#reports').hide();
    $('#reports').on('unload', function() {
        $(this).hide();
        console.log('unloaded');
    });
    $('#reports').on('load', function () {
        $('#top-nav', $(this).contents()).hide();
        $('#banner', $(this).contents()).hide();
        $('.navbar', $(this).contents()).hide();
        $('#footer', $(this).contents()).hide();
        $(this).contents().find('body').css({
            background: '#f4f5f8'
        });
        $(this).show();
    });
}

render(){
    return (
        <iframe
            id="reports"
            src="https://xxxxxxxxxxxxxxxxx/reports/"
            frameBorder="0"
            height="100%" width="100%">
        </iframe>
    )
}

}

【问题讨论】：

标签： jquery reactjs iframe

【解决方案1】：

刚刚在这里找到了答案iframe just before unload event

这是我现在工作的代码：

componentDidMount() {
    $('#reports').hide();
    $('#reports').on('load', function () {
        $('#top-nav', $(this).contents()).hide();
        $('#banner', $(this).contents()).hide();
        $('.navbar', $(this).contents()).hide();
        $('#footer', $(this).contents()).hide();
        $(this).contents().find('body').css({
            background: '#f4f5f8'
        });
        $(this).show();
        $(this)[0].contentWindow.onbeforeunload = function () {
            $('#reports').hide();
        };
    });
}

render(){
    return (
        <iframe
            id="reports"
            src="https://xxxxxxxxxxxxxxxxx/reports"
            frameBorder="0"
            height="100%" width="100%">
        </iframe>
    )
}

【讨论】：