Question

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

这是我的HTML代码：

iframe

Answer 1

这会奏效。请参阅javascript中的更改。替换＆＃34; pageyouwant.html＆＃34;使用您要在iframe中显示的页面的名称。另外，在myGoo（）函数中，你没有提到iframe的高度。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

Answer 2

对于使用高度作为属性的对象使用<element>.height，同样使用<element>.src

＆＃13;

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

＆＃13;

如何使用javascript更改iframe的高度

2 个答案: