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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python实现单向链表详解
2018/02/08 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
软件测试笔试题
2012/10/25 面试题
会计专业应届生求职信
2013/11/24 职场文书
大学生工作求职信
2014/06/23 职场文书
学雷锋倡议书
2015/01/19 职场文书
出生证明格式
2015/06/15 职场文书
活动简报范文
2015/07/22 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
一文搞懂php的垃圾回收机制
2021/06/18 PHP
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技