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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
phpwind中的数据库操作类
2007/01/02 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
两款万能的php分页类
2015/11/12 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
实例讲解Python爬取网页数据
2018/07/08 Python
简单了解Django ContentType内置组件
2019/07/23 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Python 项目转化为so文件实例
2019/12/23 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
.net C#面试题
2012/08/28 面试题
企业面试题试卷附带答案
2015/12/20 面试题
师德师风个人整改措施
2014/10/27 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
怎么用Python识别手势数字
2021/06/07 Python