javascript - 根据里面的<iframe>改变的高度

Question

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

Answer 1

像下面这样更改您的 url2div 函数。在下面的代码片段示例中，iframe 未加载，因为它在 iframe 内部加载 iframe。但在您的实际浏览器中它会起作用。突出显示的 RED 是 div 而 BLUE 边框是您的 iframe(它不是在此处加载内容，它将在您的浏览器上运行)

更新:您可以在加载 iFrame 后更改 parent div 的高度。

1) 将 onload 事件添加到您的 iFrame (onload='onMyFrameLoad()')

2) 在 onMyFrameLoad 函数上获取您的 list.phpfirst div强>页面

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>