Question

我想在按钮点击时动态创建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

Answer 1

定义它们的宽度，然后使用float将它们自己对齐。

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

Answer 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文件中的任何内容。跑吧享受。

祝你好运！

动态创建iframe

2 个答案: