Is there any Error in the code ? or How should I get desired output ?
My aim is to do this
document.getElementById('iframe1').contentWindow.document.getElementsByTagName("IMG").style = "filter:invert(100%);";
The Entire Code is given Below
<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>
If you are getting iframe successfully than change your code like this. Add your attributes in iframe tag
<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>