如何使用javascript更改iframe的高度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用javascript更改iframe的高度相关的知识，希望对你有一定的参考价值。

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

这是我的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>
答案

这会奏效。请参阅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>
另一答案

将<element>.height用于使用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的高度的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？

更改fancybox iframe的大小-我可以更改宽度但不能更改高度？

如何根据 iframe 中的动态内容更改 iframe 的高度？

加载时如何更改iframe的高度？

是否可以从内部更改 iframe 的宽度/高度

如何设置fancybox iframe的高度和宽度