getElemenstByTag在facebook页面插件iframe中返回null

Question

代码中有没有什么错误？或者，我应该如何获得所需的输出？

我的目标是做到这一点

document.getElementById('iframe1').contentWindow.document.getElementsByTagName("IMG").style = "filter:invert(100%);";

完整的代码如下所示

<iframe onload="frameload()" lazy="true" sandbox="allow-same-origin allow-scripts block-popups allow-forms" class='viewport-iframe' id='iframe1' src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTroll.Malayalam%2Fposts%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&colorscheme=&hide_cover=false&show_facepile=false&appId" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" frameborder="0" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe> 
<script type="text/javascript">
  function frameload(){
   alert(document.getElementById('iframe1'));
   alert(document.getElementById('iframe1').getElementsByTagName("img"));
  }
</script>

Answer 1

如果你成功地获得了iframe，那么就像这样修改你的代码。在iframe标签中添加属性

<iframe onload="frameload()" id='iframe1'></iframe> 
<script type="text/javascript">
   function frameload(){
         var tags = [...document.getElementById('iframe1').contentWindow.document.getElementsByTagName("img")];
         tags.forEach((el)=>{el.style="filter:invert(100%);"});
    }
</script>