Micah.Fay Micah.Fay - 2 months ago 20
jQuery Question

styling iframe in react component

I have the following code. It succeeds in hiding the header and footer of the page within the iframe when It first loads. However, when I interact with the iframe by navigating within it the header and footer always flash into view briefly. The function on the third line never fires and I'm not sure why not. Thanks for any help!!

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

Just found an answer to this right here iframe just before unload event

Here's my now working code:

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