Question

我有以下代码。它成功地在第一次加载时将页面的页眉和页脚隐藏在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>
    )
}

}

Answer 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>
    )
}

反应组件中的样式iframe

1 个答案: