谁能告诉我如何根据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>

10-07 19:54
查看更多