Javascript 在另一个iFrame实例上加载iFrame实例
我的页面上有3个iFrame。第一个iFrame占据页面的左侧45%。第二个iFrame占据页面的右侧45%。我想加载第三个iFrame,它占据页面的中间45%(最后加载,部分覆盖其他两个iFrame)。添加第3个iFrame后,我注意到它没有加载其他2个iFrame的顶部,而是将自己推到页面底部。有没有办法让一个iFrame加载到另一个iFrame上 我的CSS:Javascript 在另一个iFrame实例上加载iFrame实例,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我的页面上有3个iFrame。第一个iFrame占据页面的左侧45%。第二个iFrame占据页面的右侧45%。我想加载第三个iFrame,它占据页面的中间45%(最后加载,部分覆盖其他两个iFrame)。添加第3个iFrame后,我注意到它没有加载其他2个iFrame的顶部,而是将自己推到页面底部。有没有办法让一个iFrame加载到另一个iFrame上 我的CSS: .right { float: right; width: 60%; height
.right {
float: right;
width: 60%;
height: 100%;
background-color: #006400;
}
#iframe1 {
width: 181%;
height: 182%;
top: 50%;
left: 50%;
zoom: 1.00;
-moz-transform: scale(0.55);
-moz-transform-orgin: 0 0;
-o-transform: scale(0.55);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.55);
-webkit-transform-origin: 0 0;
}
#frame1 {
float: left;
width: 45%;
height: 75%;
top: 10%;
left: 2%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
#frame2 {
float: right;
width: 45%;
height: 75%;
top: 10%;
right: 2%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
.frame3 {
float: center;
width: 45%;
height: 75%;
top: 10%;
left: 27.5%;
margin: 10px;
border-style: solid;
border-width: 10px;
}
我的HTML:
<div class = 'right'>
<div id = 'frame1'>
<iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<div id = 'frame2'>
<iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<div id = 'frame3'>
<iframe id = 'iframe1' src = 'http://www.wsj.com'></iframe></div>
<br><br><br>
</div>
由于绝对位置的原因,您需要确保它约束在其父容器中(如果这是预期效果)
.frame3{
position:absolute;
top:10%;
left:27.5%;
width:45%;
//other properties
}
.right{
position:relative;
//other properties
}