How to change the height of an iframe with javascript

Question

I am currently trying to change the src and height of an iframe using a button on the same page using functions but I have not been able to find anything about the topic. Can someone help, please?

Here is my HTML code:

<body>

<script>
function myFunction() { 
    document.getElementById("para").innerHTML = "hello world";
    document.getElementById("headei").innerHTML = "HELLO";
    //change iframe height to 0px here
    //change iframe src here
}
function myTime() { 
    document.getElementById("para").innerHTML = Date();
    document.getElementById("headei").innerHTML = "TIME";
    //change iframe height to 0px here
    //change iframe src here
}
function myGoo() { 
    document.getElementById("para").innerHTML = "";
    document.getElementById("headei").innerHTML = "";
    //change iframe height here
    //change iframe src here
}
function myWamp() { 
    document.getElementById("para").innerHTML = "";
    document.getElementById("headei").innerHTML = "";
    //change iframe height to 950px here
    //change iframe src here
}
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<div class="row">

  <div class="col-3 menu">
    <ul>
      <button type="button" onclick="myFunction()">Home</button>
      <button type="button" onclick="myTime()">Time</button>
      <button type="button" onclick="myGoo()">Google</button>
      <button type="button" onclick="myWamp()">Wamp Info</button>
    </ul>
  </div>

  <div class="col-6">
    <h1 id="headei">HELLO</h1>
    <p id="para">hello world</p>
    <iframe src="" id="myFrame" height=0></iframe>
  </div>

</div>

</body>

Answer 1

This will work. Please see the changes in the javascript. Replace "pageyouwant.html" with the name of the page that you want to display in the iframe. Also, in myGoo() function, you hadn't mentioned the height for the iframe.

 var myFrame = document.getElementById("myFrame"); var para = document.getElementById("para"); var headei = document.getElementById("headei"); function myFunction() { para.innerHTML = "hello world"; headei.innerHTML = "HELLO"; myFrame.style.height = "0px"; myFrame.src = "pageyouwant.html"; } function myTime() { para.innerHTML = Date(); headei.innerHTML = "TIME"; myFrame.style.height = "0px"; myFrame.src = "pageyouwant.html"; } function myGoo() { para.innerHTML = ""; headei.innerHTML = ""; myFrame.style.height = "0px"; myFrame.src = "pageyouwant.html"; } function myWamp() { para.innerHTML = ""; headei.innerHTML = ""; myFrame.style.height = "950px"; myFrame.src = "pageyouwant.html"; }

 <div class="row"> <div class="col-3 menu"> <ul> <button type="button" onclick="myFunction()">Home</button> <button type="button" onclick="myTime()">Time</button> <button type="button" onclick="myGoo()">Google</button> <button type="button" onclick="myWamp()">Wamp Info</button> </ul> </div> <div class="col-6"> <h1 id="headei">HELLO</h1> <p id="para">hello world</p> <iframe src="" id="myFrame" height="0px"></iframe> </div> </div>

Answer 2

Use <element>.height for objects that use height as an attribute, and <element>.src likewise

 <body> <script> function myFunction() { document.getElementById("para").innerHTML = "hello world"; document.getElementById("headei").innerHTML = "HELLO"; document.getElementById("myFrame").height = 0; document.getElementById("myFrame").src = "<your source>"; } function myTime() { document.getElementById("para").innerHTML = Date(); document.getElementById("headei").innerHTML = "TIME"; document.getElementById("myFrame").height = 0; document.getElementById("myFrame").src = "<your source>"; } function myGoo() { document.getElementById("para").innerHTML = ""; document.getElementById("headei").innerHTML = ""; document.getElementById("myFrame").height = 950; document.getElementById("myFrame").src = "<your source>"; } function myWamp() { document.getElementById("para").innerHTML = ""; document.getElementById("headei").innerHTML = ""; document.getElementById("myFrame").height = 950; document.getElementById("myFrame").src = "<your source>"; } </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <div class="row"> <div class="col-3 menu"> <ul> <button type="button" onclick="myFunction()">Home</button> <button type="button" onclick="myTime()">Time</button> <button type="button" onclick="myGoo()">Google</button> <button type="button" onclick="myWamp()">Wamp Info</button> </ul> </div> <div class="col-6"> <h1 id="headei">HELLO</h1> <p id="para">hello world</p> <iframe src="" id="myFrame" height=0></iframe> </div> </div> </body>

How to change the height of an iframe with javascript

Question

2 answers

solution1
2

solution2
0 2018-03-06 01:02:37

How to change the height of an iframe with javascript

Question

2 answers

solution1 2

solution2 0 2018-03-06 01:02:37

solution1
2

solution2
0 2018-03-06 01:02:37