如何使用JavaScript更改iframe的高度

Question

我目前正在尝试使用功能使用同一页面上的按钮来更改iframe的src和height ，但是我无法找到有关该主题的任何信息。 有人可以帮忙吗？

这是我的HTML代码：

<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

这将起作用。 请查看javascript中的更改。 将“ pageyouwant.html”替换为要在iframe中显示的页面的名称。 另外，在myGoo（）函数中，您没有提到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

对于将height用作属性的对象，请使用<element>.height对于<element>.src同样使用

 <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>

如何使用JavaScript更改iframe的高度

问题描述

2 个解决方案

解决方案1
2

解决方案2
0 2018-03-06 01:02:37

如何使用JavaScript更改iframe的高度

问题描述

2 个解决方案

解决方案1 2

解决方案2 0 2018-03-06 01:02:37

解决方案1
2

解决方案2
0 2018-03-06 01:02:37