CMS 系统之 iframe 结构

之前学习时代用的是这种方式：

<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 高度相同。

积累知识，分享知识，学习知识。