反應組件中的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> 
    ) 
}