I am trying to manipulate an iframe (chatbox) when loaded on a webpage. The chatbox loads four iframes with changing id with each pageload. Because the iframe that needs to be manipulated is the last / 4th of the list, i used get elements by tagname (“iframe”).
However, no style is added to the last iframe:
JavaScript
x
8
1
<script> 2
window.onload = function() {3
let myiFrame = document.getElementsByTagName("iframe");4
let doc = myiFrame[3].contentDocument;5
doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{dispay:block !important}</style>";6
7
}</script>8
Advertisement
Answer
use
JavaScript
1
2
1
myiFrame[3].style.cssText = "display:block !important"2
your code will become
JavaScript
1
7
1
<script> 2
window.onload = function() {3
let myiFrame = document.getElementsByTagName("iframe");4
myiFrame[3].style.cssText = "display:block !important";5
}6
</script>7
Sample working code:
JavaScript
1
17
17
1
<!DOCTYPE html>2
<html>3
<body>4
5
<p id="myP1" style="display: none!important">This is some text.</p>6
7
<input type="button" onclick="demoDisplay()" value="Show">8
9
<script>10
function demoDisplay() {11
document.getElementById("myP1").style.cssText = "display:block !important";12
}13
14
</script>15
16
</body>17
</html>