HTML5不支持frameset的两种解决方法


Posted in HTML / CSS onNovember 14, 2016

解决方法如下:

第一种

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

第二种

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

所以个人更倾向于这种方法。

我一般是这样写的

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

 });

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css实现frameset效果</title>
<style type="text/css">
.header{border-bottom:1px solid #ccc;margin-bottom:5px;}
.MainContainer{min-width:960px;max-width:1600px;}
.sidebar{width:180px;float:left;margin-right:-180px;border-right:1px solid #ccc;min-height:500px;padding:5px;}
.main{float:left;margin-left:200px;padding:5px;}
.content{padding:0 10px;}
</style>
</head>
<body>
    <div class="page">
        <div class="header">
            <div id="title">
                <h1>顶部</h1>
            </div>
        </div>
        <div class="MainContainer">
            <div class="sidebar">
            边栏
            </div>
            <div  id="main" class="main">
                内容
            </div>           
        </div>
    </div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 #HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 #HTML / CSS
html5中的一些标签学习(心得)
Oct 18 #HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 #HTML / CSS
You might like
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
浅析Vue自定义组件的v-model
2017/11/26 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python中数字是否为可变类型
2020/07/08 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript