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

Posted 2023-03-05

【中文标题】getElemenstByTag 在 facebook 页面插件 iframe 中返回 null

【英文标题】：getElemenstByTag returning null inside facebook page plugin iframe

【发布时间】：2021-11-11 02:56:06

【问题描述】：

代码中是否有任何错误？或者我应该如何获得想要的输出？

我的目标是这样做

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>

【问题讨论】：

如果你想用document.getElementById('iframe1').contentWindow.document.getElementsByTagName("IMG")，那你为什么叫document.getElementById('iframe1').getElementsByTagName("img")？

@VLAZ 我正在尝试对代码进行不同类型的更改

@VLAZ 哪个是正确的？

您无法访问从其他域加载其内容的 iframe，并从您的页面编写脚本，同源策略可以防止这种情况发生。

@CBroe 有什么方法可以让 IFRAME 中的所有图像都反转颜色

【参考方案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>

【讨论】：

但是兄弟，Iframe中的图像仍然没有倒置

@SimpleGuy_ ！使用关注，为我工作[...document.getElementById('iframe1').contentWindow.document.getElementsByTagName("img")]

那3个点（...）有什么用

var tags = [document.getElementById('iframe1').contentWindow.document.getElementsByTagName("img")];警报（标签）；我没有收到任何警报框，这意味着空值，对吧？

@SimpleGuy_ ！ 3 个点 (...) 称为展开运算符。抱歉，这里没法解释，google吧