如何在iframe中隐藏div？

Question

I have tried the following which did not work:

$('iframe').contents().find('#hide_this_div').hide(); 

$(function() {   
  var $head = $('frame').contents().find("head");                
  $head.append("<link/>", { 
    rel: "stylesheet", 
    href: "./hide_the_div.css", 
    type: "text/css" 
  });
})

#hide_the_div {
  display: none;
}

I am trying to hide the .timestamp class in this iframe:

<iframe  src="https://www.facebook.com/plugins/comment_embed.php?href=https%3A%2F%2Fwww.facebook.com%2FScrapbookingCoach%2Fvideos%2F318198945603068%2F%3Fcomment_id%3D331374627618833&include_parent=false" width="560" height="141" style="border:none;overflow:hidden" scrolling="yes" frameborder="15" allowTransparency="true" allow="encrypted-media"></iframe>

Answer 1

Try something like this

For example, if you want to hide h1 from <iframe>

<iframe id="myFrame" src="#" style="height:380px;width:100%"></iframe>


function myFunction() {
  var iframe = document.getElementById("myFrame");
  var element = iframe.contentWindow.document.getElementsByTagName("h1")[0];
  element.style.display = "none";
}

Answer 2

I think you need to wait for iframe is loaded.

$('#my_iframe').ready(function(){
  console.log('load the iframe')
  var $timestamp = $('#my_iframe').find(".timestampContent");
  $timestamp.hide();
});