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制作精致的照片墙特效
Jun 07 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
使用CSS定位HTML元素的实现方法
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桌面中心(二) 数据库写入
2007/03/11 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP通用检测函数集合
2011/02/08 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php获取远程文件大小
2015/10/20 PHP
PDO::errorInfo讲解
2019/01/28 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue--vuex详解
2019/04/15 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python实现list反转实例汇总
2014/11/11 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python docx库用法示例分析
2019/02/16 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
什么是属性访问器
2015/10/26 面试题
sort命令的作用和用法
2013/08/25 面试题
遗嘱继承公证书
2014/04/09 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014年保卫工作总结
2014/12/05 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书