How ToJavaScriptMake Web StoriesQuiz GeneratorFAQ Schema GeneratorTable Maker3schools TranslateMore Tools..
Apu
Apu 11/05/2022

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 using js.

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 »
If you want to work with different domains, then this methods aren't possible.

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

  1. Hide an element inside iframe using javascript and Jquery.
  2. Change element style inside iframe.
  3. Add a new button inside iframe dynamically.
Share

How to hide div inside iframe using javascript

0
In this article, you will learn how you can easily hide a div element inside iframe using…
asked
0 answers

Write an Answer

Related Posts
Write an answer
back