H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。

<frameset id="frame" frameborder="0" framespacing="0" rows="100,*" border="false" scrolling="yes">
<frame name="topframe" scrolling="auto" marginheight="0" marginwidth="0" src="header.jsp" noresize>
<frameset  framespacing="0" border="false" cols="200,*" frameborder="0" scrolling="yes">
   <frame name="leftFrame" scrolling="no" marginheight="0" marginwidth="0"src="index.jsp" noresize>
    <frame name="rightFrame" scrolling="auto"  src="rightFrame.jsp"marginheight="0" marginwidth="0">
</frameset>
</frameset>

在这前的网页制作中,特别是后台管理页面或教程类网站(左侧目录,右侧主内容区)中经常使用。

  • 在 HTML 5 中不支持 <frameset></frameset> 标签。
  • 使用<frameset>可能会带来session丢失等问题

H5不支持frameset的三种解决方案

一、div+iframe替代frameset实现

<html>
<head>
    <title>div+iframe替代frameset实现|www.125jz.com</title>
    <style>
        body
        {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
        }
 
        #frameTop
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
            vertical-align: middle;
        }
 
        #frameContentLeft
        {
            position: fixed;
            top: 100px;
            left: 0;
            height: 100%;
            width: 150px;
            overflow: hidden;
            vertical-align: top;
            background-color: #D2E6FA;
        }
 
        #frameContentRight
        {
            position: absolute;
            left: 150px;
            top: 100px;
            height: 100%;
            width: 100%;
            right: 0;
            bottom: 0;
            overflow: hidden;
            background: #fff;
        }
    </style>
</head>
  
<body> 
    <div>
        <iframe id="frameTop" src="http://www.baidu.com"></iframe>
    </div>
    <div>
        <iframe id="frameContentLeft" src="http://www.baidu.com"></iframe>
        <iframe id="frameContentRight" src="http://www.125jz.com"></iframe>
    </div>
</body>
</html>

但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之间还有不兼容的情况。而且iframe窗口间传值似乎很麻烦。

二、include替代frameset实现

不同后台技术都有自己的方法,比如 ASP 有 SSI,PHP 有 require、require_once 或 include 函数,JSP 也有 include 指令。

三、使用jQuery的onload方法替代frameset实现

使用jQuery的onload方法加载页面,不过这种方法跳转多个页面后,点击浏览器上方的后退前进是无效的,不过可以认为的添加一个返回按钮。

$("#main").load("mainIndex.html",function(){
 
 });

对于页面,div+css可以实现frameset的效果

H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

代码:

Tips:You can change the code before run.

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4586.html

(0)
江山如画的头像江山如画管理团队
3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转
上一篇 2020年1月1日 上午9:44
python使用列表生成式生成列表 其元素为100以内所有能被3整除的数
下一篇 2020年1月2日 下午3:20

99%的人还看了以下文章

  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    6.8K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    4.8K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    5.7K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    11.7K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    31.2K0
  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    17.7K0

发表回复

登录后才能评论