使用过iframe的同志们过来看看下

暖枫无敌
博客专家认证
2011-04-23 07:59:52

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="center.aspx.cs" Inherits="DHM_center" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>多画面显示</title>
<style type="text/css">
.top
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.top .a1
{
float: left;
width: 100%;
height: 100%;
background-color: White;
}
.top .a1 .b1
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b2
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b3
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b4
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
</style>
<script type="text/javascript">
//iframe高度自适应
function IFrameReSize(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
pTar.height = pTar.contentDocument.body.offsetHeight;
} //ie
else if (pTar.Document && pTar.Document.body.scrollHeight) {
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
//iframe宽度自适应
function IFrameReSizeWidth(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
pTar.width = pTar.contentDocument.body.offsetWidth;
} //ie
else if (pTar.Document && pTar.Document.body.scrollWidth) {
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="top">
<div class="a1">
<div class="b1">
<iframe id="if_left_top" scrolling="no" frameborder="0" height="100%" src='<%=url1%>' width="100%" onload='IFrameReSize("if_left_top");IFrameReSizeWidth("if_left_top");' ></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="<%=url2%>" width="100%" onload='IFrameReSize("if_right_top");IFrameReSizeWidth("if_right_top");' ></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url3%>" width="100%" onload='IFrameReSize("if_left_bottom");IFrameReSizeWidth("if_left_bottom");' ></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="<%=url4%>" width="100%" onload='IFrameReSize("if_right_bottom");IFrameReSizeWidth("if_right_bottom");'></iframe>
</div>
</div>
</div>
</form>
</body>
</html>



以上在一个页面中使用了四个iframe,可是效果是这样的,高度只有一半,不是很了解。



也尝试使用过table布局,两行两列,但都没实现高度100%的效果。
...全文
139 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
孟子E章 2011-04-23
  • 打赏
  • 举报
回复
如果你想4个画面绝对地上下左右各2个。那么table就可以了
<table style="width:100%">
<tr>
<td style="width:50%"><ifram style="width:100%" onload='IFrameReSize("if_left_top");' id="if_left_top"></iframe></td><td style="width:50%"></td>
</tr>
<tr>
<td style="width:50%"></td><td style="width:50%"></td>
</tr>
</table>


div float的做法如果内容不是一个高度,可能会错位的。

另外,没有设置width

设置高度是采用css,必须加px

<script type="text/javascript">
//iframe高度自适应
function IFrameReSize(iframename) {
var pTar = document.getElementById(iframename);
if (pTar) { //ff
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
pTar.style.height = pTar.contentDocument.body.offsetHeight + "px";
} //ie
else if (pTar.Document && pTar.Document.body.scrollHeight) {
pTar.style.height = pTar.Document.body.scrollHeight + "px";
}
}
}
</script>
暖枫无敌 2011-04-23
  • 打赏
  • 举报
回复
那不好吧,毕竟要适应屏幕分辨率呀,要是定死的话,就不用这么麻烦考虑到这些情况了
缪军 2011-04-23
  • 打赏
  • 举报
回复
那你这种情况应该定死绝对高度
暖枫无敌 2011-04-23
  • 打赏
  • 举报
回复
我当时这是用百度页面作为src来测试用的而已
暖枫无敌 2011-04-23
  • 打赏
  • 举报
回复


主要是想通过左侧的树形菜单,通过点击一次在右边显示一个视频监控画面,一共是四个画面,点击第五次的时候,第一个画面的src重新换成第五次点击的页面??

我暂时想通过iframe来实现,有没有后其他更好的办法?
缪军 2011-04-23
  • 打赏
  • 举报
回复
1.计算高度的时候加上一个偏移量,比如50像素;
2.本身百度主页高度大约就在四五百像素左右;
3.指定最小高度
孟子E章 2011-04-23
  • 打赏
  • 举报
回复
自适应高度是可以的,那你写css还有什么用啊。js 代码都重新设置了,设置完后是iframe里面内容的高度,不是外面css的了。所以,100%就无效了啊
暖枫无敌 2011-04-23
  • 打赏
  • 举报
回复
这样是做是可以,但是自适应宽度和高度就无法保障了。


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="DHM_test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>多画面显示</title>
<style type="text/css">
html, body, form
{
height: 100%;
}
.top
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.top .a1
{
float: left;
width: 100%;
height: 50%;
background-color: White;
}
.top .a1 .b1
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b2
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b3
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b4
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="top">
<div class="a1">
<div class="b1">
<iframe id="if_left_top" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="50%" src="http://www.baidu.com"
width="100%"></iframe>
</div>
</div>
</div>
</form>
</body>
</html>

winner2050 2011-04-23
  • 打赏
  • 举报
回复
正常现象。

你用的是百度做例子,所以得到的高度不正确。

绝大部分网页用用xhtml了,就是页头有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

所以百度、asp.net错误页面,iframe取得的高度都是不正确的。

孟子E章 2011-04-23
  • 打赏
  • 举报
回复
100%高度的代码

另外,你需要搞清楚,100%是相对于谁的100%
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>多画面显示</title>
<style type="text/css">
html, body, form
{
height: 100%;
}
.top
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
.top .a1
{
float: left;
width: 100%;
height: 100%;
background-color: White;
}
.top .a1 .b1
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b2
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b3
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
.top .a1 .b4
{
background-color: white;
float: left;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="top">
<div class="a1">
<div class="b1">
<iframe id="if_left_top" scrolling="no" frameborder="0" height="100%" src='Default10.aspx'
width="100%"></iframe>
</div>
<div class="b2">
<iframe id="if_right_top" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
<div class="b3">
<iframe id="if_left_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
<div class="b4">
<iframe id="if_right_bottom" scrolling="no" frameborder="0" height="100%" src="Default10.aspx"
width="100%"></iframe>
</div>
</div>
</div>
</form>
</body>
</html>
孟子E章 2011-04-23
  • 打赏
  • 举报
回复
你要设置高度,首先要保证容器的高度是固定的,如
html,body,form{height:100%}

另外,既然是自适应高度,外面设置的css就没有作用了啊

孟子E章 2011-04-23
  • 打赏
  • 举报
回复
js是不能跨域的
CSDN_CODER 2011-04-23
  • 打赏
  • 举报
回复
在IE8上是不行的,就这个效果,其他没试过,因为IE8不行,所以即使IE6或IE7行的话,也不能解决这个布局问题。
叶子 2011-04-23
  • 打赏
  • 举报
回复
在IE6 IE7 IE8上效果一样吗?
CSDN_CODER 2011-04-23
  • 打赏
  • 举报
回复
帮顶!
暖枫无敌 2011-04-23
  • 打赏
  • 举报
回复
对布局这东东,着实是头痛

62,025

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧