Question

任何人都可以告诉我如何根据 div 中的 iframe 更改 div 的高度。

＆＃xA;＆＃xA;

以下是我到目前为止所做的事情：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

＆＃xD;＆＃xA ;

  function url2div（url，target）{＆＃xD;＆＃xA; document.getElementById（target）.innerHTML =＆＃xD;＆＃xA; '＆lt; iframe style =“＆＃xD;＆＃xA; width：100％;＆＃xD;＆＃xA; height：100％;” ＆＃的xD;＆＃XA; frameborder =“0”＆＃xD;＆＃xA; src =“'+ url +'”/＆gt;'; ＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

  .table1 {width ：100％;＆＃xD;＆＃xA;显示：表;＆＃的xD;＆＃XA;文本对齐：中心;＆＃的xD;＆＃XA;边框宽度：1px的;＆＃的xD;＆＃XA;边框颜色：黑色;＆＃的xD;＆＃XA;边框样式：固体;＆＃的xD;＆＃XA; }

＆＃xD;＆＃xA;

 ＆lt; div class =“table1”＆gt;＆＃的xD;＆＃XA; ＆lt; div class =“row”＆gt;＆＃xD;＆＃xA; ＆lt; div class =“tdnav”＆gt; ＆＃的xD;＆＃XA; ＆lt; a href =“＃”id =“list.php”onclick =“url2div（this.id，'content'）”＆gt;我的列表＆lt; / a＆gt;＆＃xD;＆＃xA; ＆lt; a href =“＃”＆gt; Dummy＆lt; / a＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆lt; div class =“tdic”id =“content”＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA; ＆ #xA;

Answer 1

更改您的 url2div 功能，如下所示。在这个代码段示例下面，iframe没有加载，因为它在iframe中加载了iframe。但是在你的实际浏览器中它会起作用。突出显示的 RED 为 div ， BLUE 边框为您的iframe（不是在此处加载内容，它将在您的浏览器上运行）

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

1）将 onload 事件添加到您的iFrame （onload =＆＃39; onMyFrameLoad（）＆＃39;）

2）在 onMyFrameLoad 上获取 list.php 的第一个div 页面

3）获取 第一个div 的高度并将其分配给 .table1 div

＆＃13;

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

＆＃13;

.table1 {
  width: 100%;
  display: table;
  text-align: center;
  border-width: 2px;
  border-color: red;
  border-style: solid;
}

＆＃13;

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

＆＃13;

Answer 2

从上面的javascript我猜测网址是动态的，因此我建议在窗口加载时执行以下操作。我直接使用Java，所以你需要加载jquery才能使我的解决方案正常工作。

jQuery(window).load(function() {
 var url = document.getElementById("iframe_id").src;

 if(url = 'http://www.yourdomain.com') {
  jQuery('div.youWishToFloat').css({'float':'right'});
 } elseif(url = 'http://www.yourdomain2.com') {
  jQuery('div.youWishToFloat').css({'float':'left'});
 }
}

您需要为iframe指定一个ID才能生效。

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

2 个答案: