动态创建 iframe答案

【问题标题】：Create an iframe dynamically动态创建 iframe
【发布时间】：2014-06-19 01:54:10
【问题描述】：

我想在单击按钮时动态创建一个 iframe，并且我想并排加载它。但它来了一个在另一个之下。

请帮忙

这是我的代码。

<!DOCTYPE html>
<html>
<style>
.box{
width:100%;
float:left; 
}

</style>

<div class="box">
<iframe width="100%" scrolling="yes" height="630"  src="window.html">
</iframe>
</div>

<div class="box">
<iframe width="100%" scrolling="yes" height="630"  src="window.html">
</iframe>
</div>
</html>

而我的 window.html 是：

<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

 <script type="text/javascript">
 $(document).ready(function(e) {

  $('#apDiv2').click(function(e) {
  alert('sdf');
 });   

  });
  </script>
   <head>
 <style type="text/css">
 #apDiv1 {
position: absolute;
width: 933px;
height: 115px;
z-index: 1;
left: 94px;
top: 138px;
 }

 #apDiv3 {
position: absolute;
width: 56px;
height: 54px;
z-index: 1;
left: 1174px;
top: -117px;
}
 #apDiv2 {
position: absolute;
width: 54px;
height: 52px;
z-index: 2;
left: 1267px;
top: 422px;
}
 #apDiv4 {
position: absolute;
width: 77px;
height: 76px;
z-index: 3;
left: 1019px;
top: 412px;
}
 #apDiv5 {
position: absolute;
width: 558px;
height: 50px;
z-index: 4;
left: 153px;
top: 413px;
 }

 </head>
 <body>
 <div id="apDiv5">
  <label for="textfield"></label>
  <input type="text" name="textfield" id="addr" size="100" placeholder="enter the URL here">
 </div>
 <div id="apDiv1">

  <div id="apDiv3"><img src="close.png" width="50" height="50"></div>
  <p>on the closs button</p>
 </div>
 <div id="apDiv2" ><img src="add.png" width="50" height="50"></div>
 <div id="apDiv4"  style="display:none"><img src="pull.png" width="50" height="51">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PULL</div>
 </body>
</html>

实际上我想在第一个 iframe 的一侧加载一个新的 iframe

【问题讨论】：

标签： html css iframe

【解决方案1】：

定义它们的宽度，然后使用float 将它们对齐到各自的一边。

否则，div 是block 级别元素。这需要整条线。您应该将它们的宽度设置为50%，然后将它们彼此对齐。

【讨论】：

但我需要动态创建 div。我需要这样的结果。：childersc.com/projects/multisite

【解决方案2】：

只需从您的代码中删除以下行：

<div class="box">
    <iframe width="100%" scrolling="yes" height="630"  src="window.html"></iframe>
</div>
<div class="box">
    <iframe width="100%" scrolling="yes" height="630"  src="window.html"></iframe>
</div>

并粘贴：

<iframe width="20%" scrolling="yes" height="400"  src="window.html" style="border: 10px solid red;"></iframe>
<iframe width="10%" scrolling="yes" height="400"  src="window.html" style="border: 10px solid green;"></iframe>

您不会更改 window.html 文件中的任何内容。运行它并享受它。

祝你好运！

【讨论】：

但我需要动态创建 div。我需要这样的结果。：childersc.com/projects/multisite 请帮助