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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
浅谈五大Python Web框架
2017/03/20 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python实现邮件发送功能
2019/08/10 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python txt文件如何转换成字典
2020/11/03 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
单位婚育证明范本
2014/11/21 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
JS函数式编程实现XDM一
2022/06/16 Javascript