谁能告诉我如何根据div
内部的iframe
更改div
的高度。
到目前为止,这是我所做的:
function url2div(url, target) {
document.getElementById(target).innerHTML =
'<iframe style="
width:100%;
height:100%;"
frameborder="0"
src="' + url + '" />';
}
.table1 { width: 100%;
display:table;
text-align:center;
border-width:1px;
border-color:black;
border-style:solid;
}
<div class="table1">
<div class="row">
<div class="tdnav">
<a href="#" id="list.php" onclick="url2div(this.id, 'content')">My lists</a>
<a href="#">Dummy</a>
</div>
<div class="tdic" id="content">
</div>
</div>
</div>
最佳答案
如下更改您的url2div函数。在此代码段示例中,iframe不会加载,因为它在iframe中加载了iframe。但是在您实际的浏览器中它将起作用。突出显示的红色是div,蓝色边框是您的iframe(它不会在此处加载内容,它将在您的浏览器上运行)
更新:
加载iFrame后,您可以更改父div的高度。
1)将onload事件添加到您的iFrame(onload ='onMyFrameLoad()')
2)在onMyFrameLoad函数上,获取list.php页面的第一格
3)获取第一个div的高度并将其分配给.table1 div
function url2div(url, target) {
document.getElementById(target).innerHTML =
"<iframe style='width:100%;height:100%;border-color: blue;' onload='onMyFrameLoad()' src='" + url + "' />";
}
function onMyFrameLoad() {
// Get height of first div and assign it to the table1 div
var parentDivHeight = document.getElementById('firstDivId').offsetHeight;
document.getElementsByClassName('table1')[0].style.height = parentDivHeight + "px";
}
.table1 {
width: 100%;
display: table;
text-align: center;
border-width: 2px;
border-color: red;
border-style: solid;
}
<div class="table1">
<div class="row">
<div class="tdnav">
<a href="#" id="http://www.google.com/" onclick="url2div(this.id, 'content')">My lists</a>
<a href="#">Dummy</a>
</div>
<div class="tdic" id="content">
</div>
</div>
</div>