How to hide div inside iframe using javascript
In this article, you will learn how you can easily hide a div element inside iframe using javascript.
Example : hide div element inside iframe.
Click on the Hide Div button to hide the <div> element inside the above iframe.
How to hide div inside iframe using javascript
In the first example, you will see how to hide a div element inside iframe using the contentWindow property.
Hide div element inside iframe.
<button onclick="hideDiv()">
Hide Div
</button>
<iframe id="iframe-id" src="/p/example.html" style="height:370px;width:100%">
</iframe>
<script>
function hideDiv() {
var myIframe = document.getElementById("iframe-id");
var divElement = myIframe.contentWindow.document.querySelector(".note);
divElement.style.display = "none";
}
</script>
Try it Yourself »
The contentWindow property returns the Window object of an HTMLIFrameElement. You can use this Window object to access the iframe's document and its internal DOM.
You can also create the same thing in just one line of jQuery.
Hide div element inside iframe using Jquery
<iframe id="iframe-id" src="/p/example.html" style="height:370px;width:100%">
</iframe>
<script>
function hideDiv() {
$('#iframe-id').contents().find('#div').hide();
}
</script>
Try it Yourself »
How to change element style inside iframe.
Now, In this example, I will show you how you can also change the style of an element inside iframe using javascript.
Apply style to an element inside iframe.
<iframe id="iframe-id" src="/p/example.html" style="height:370px;width:100%">
</iframe>
<script>
function changeStyle() {
const myIframe = document.getElementById("iframe-id");
const divElement = myIframe.contentWindow.document.querySelector("#div");
divElement.style = "border:2px solid red;background-color:#ff0";
}
</script>
Try it Yourself »
How to add a new button inside iframe using js.
Let add a new button element inside iframe using javascript dynamically. you can also add div, heading, paragraph, link etc. using the createElement() method.
Add a new button element inside iframe.
<iframe id="iframe-id" src="/p/example.html" style="height:370px;width:100%">
</iframe>
<script>
function addBtn() {
const myIframe = document.getElementById("iframe-id");
const divElement = myIframe.contentWindow.document.querySelector('#div');
const newElement = document.createElement('button');
newElement.innerHTML="New Button Element";
divElement.appendChild(newElement);
}
</script>
Try it Yourself »
Conclusion
In this article, you have learned to
- Hide an element inside iframe using javascript and Jquery.
- Change element style inside iframe.
- Add a new button inside iframe dynamically.
$("#myiframe").contents().find("#myContent").hide();
In this example, the find() method is used to locate the element with the id of 'myContent' inside the iframe, and the hide() method is used to hide it.