做项目的时候用到了iframe高度自适应,上网找到了解决方案,特此记录一下,以备以后使用。
原文网址: http://hi.baidu.com/cqxuanboy/blog/item/8436ad3c03162fd07c1e7132.html
</div>
另外,由于iframe没有对css和js进行扩展,因此想要设置iframe中页面样式,只能在子页面中引用css文件或直接对元素声明css样式,无法在主页面对所有的iframe嵌套页统一设置样式。
这个方法主要一步不能保存缓存数据,可能会导致数据经常需要重新读取,影响速度。
如果只是希望将页面的公共元素抽离,高度和宽度可以固定的话,可以考虑反向嵌套,定义公共元素页面header.html, 在新页面中使用<!--#include-->或者iframe引用,从而达到页面元素的共用。
<!--#include -->是服务器端的,可以在*.aspx中使用,但不能直接用于html页面中。
<!--#include file="header.html" -->
iframe在服务器代码和html中都可以使用,引用时注意设置border属性,否则浏览器长宽发生改变时,可能会出现滚动条。
header.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fixed Income DBA Resources</title>
<link rel="stylesheet" href="../css/dbares.css" />
<link rel="stylesheet" href="../css/jeasyui/easyui.css" />
</head>
<body>
<div id="header" style="100%">
This is Header page!
</div>
</body>
</html>
内容页:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fixed Income DBA Resources</title>
<link rel="stylesheet" href="../css/dbares.css" />
<link rel="stylesheet" href="../css/jeasyui/easyui.css" />
<script type="text/javascript" src="../js/jquery-1.9.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<iframe id="frHeader" height="140px" scrolling="no" name="frHeader" src="header.html" width="100%" frameborder="0" marginheight="0" marginwidth="0" hspace="0" vspace="0"></iframe>
<div id="mainwrap">
This is Content page
</div>
</body>
</html>