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的定位页面元素
Aug 29 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 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信息函数
2015/10/21 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
php中错误处理操作实例分析
2019/08/23 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
28个JS验证函数收集
2010/03/02 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
js实现Tab选项卡切换效果
2020/07/17 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python中的各种装饰器详解
2015/04/11 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python字符串与url编码的转换实例
2018/05/10 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python获取交互式ssh shell的方法
2019/02/14 Python
python程序需要编译吗
2020/06/19 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
小学生操行评语大全
2014/04/22 职场文书
2015学校年度工作总结
2015/05/11 职场文书