我目前正在尝试使用功能在同一页面上使用按钮更改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>