静态页面菜单栏布局整改使用iframeset

Posted 2022-02-24 luoning

　　　　项目初期静态页面素材是单独分开的独立功能页面，但拥有相同的页面布局规则（头部横幅区域显示logo系统名称，页面左侧区域显示菜单、右侧主题部分显示不同菜单对应内容），最初页面菜单点击是链接到另一个对应内容页面打开新窗口，重新显示头部、菜单、主题；但真正用于系统中需要固定菜单栏，在点击菜单时候只替换主题内容页面区域部分。

　　　开始改造页面，思路有二：

　　　　一、通过页面中js事件控制页面内容变动 <a href="javascript:$(#xxx).load(‘/views/xxx/xx.html‘);">

　　　　二、使用iframeset标签，这里分享使用iframeset时遇到的曲折以作为经验。

菜单栏html代码如：

<ul>
<li id="index1" >
<a id="index_a1" href="/one/two/three.html" target="mainframe">
<span >选项一<br>
<b>Option one</b>
</span>
</a>
</li>
<li id="index2" >
<a href="" lay-href="/" target="mainframe">
<span >选项二<br>
<b>Option otwo</b>
</span>
</a>
</li>
<li id="index3" >
<a href="/content/views/gxxx/gxxx.html" target="mainframe">
<span >xxx<br>
<b> xxx</b>
</span>
</a>
</li>
</ul>

　　通过在a标签target属性指定在点击菜单时链接到规划好的页面主体窗口中！

<iframe id="myiframe" name="mainframe" scrolling="no" frameborder="0" height="auto" width="100%" border="0"></iframe>

　　这里iframe中name属性就是a标签中target指向的主体区域部分 ，大概思路就是这样至于样式问题根据具体修改调整。