反应组件中的iframe样式

Question

我有以下代码。它在第一次加载时成功隐藏页面的页眉和页脚。但是，当我通过在其中导航的方式与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> 
    ) 
}