之前学习时代用的是这种方式:
<frameset rows="60,*" cols="*" frameborder="no" border="0" framespacing="0"> <frame src="top.php" name="topFrame" scrolling="no"> <frameset cols="180,*" name="btFrame" frameborder="NO" border="0" framespacing="0"> <frame src="menu.php" noresize name="menu" scrolling="yes"> <frame src="main.php" noresize name="main" scrolling="yes"> </frameset> </frameset>
现在换成了iframe
最近项目使用的这个结构:还比较满意:
页面结构是这么个类型的
这是地一块
|----------------------------------------------------------------|
|----------------------------------------------------------------|
|---| |--------------------------------------------------------|
|二 | | 这是第三块 |
| 块| | |
|---| |--------------------------------------------------------|
三块结构。
1 :首先我定义了一个头部主要为了很多页面公用的JS css 等等
2 :第一块和第二块html我写在了一个页面 嵌入一个iframe
这样就构成了我们想要的结构。
该注意的地方:
iframe页面的高度问题。iframe 页面的高度是未知的,如果不处理等高,那么就可能造成有些页面面内容展示不出来。因为他是不会把父页面撑开的。
一下是等高代码和HTML代码
父页面的iframe
<div id="iframe-wrap"> <iframe id="MainIframe" name="indexMain" width="100%" frameborder="0" scrolling="no" allowtransparency="true"></iframe> </div>
iframe子页面的内容
<div class="main-wrap" style="background:#FFF;"> <h1 style="padding-top: 50px">welcome</h1> <div style = "font-size: 25px;padding-left:20px">this is the first page</div> <div style = "font-size: 25px;padding-left:40px">if you want to get more information<div> <div style = "font-size: 25px;padding-left:60px">please move your mouse and click more url</div> </div>
等高的JS
$('#MainIframe', window.parent.document).height($('.main-wrap').height());//父页面高度 赋值给 子页面 iframeWrap.height($('#MainIframe').height());
等于就是让两个div 高度相同。