iframe异步加载实现点击左边菜单加载右边内容实例讲解


Posted in Javascript onMarch 04, 2013

关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面。

话不多说,做了一个实例大致是这样的:

1、首先在你的项目中建立三个文件如:

iframe异步加载实现点击左边菜单加载右边内容实例讲解

2、在Default页面引入jquery文件并在body中加入也下代码:

<div style="width: 20%; float: left"> 
<div id="butten" style="cursor: pointer;"> 
局部刷新(框架加载页面) 
</div> 
<div id="hidden" style="display: none"> 
我是隐藏的,点击局部刷新之后<br /> 
我就显示,页面加载我不会消失 
</div> 
</div> 
<div id="page" style="width: 80%; float: right;"> 
<iframe src='1.htm' frameborder='0' style='border: 0; width: 100%; height: 99.4%;'> 
</iframe> 
</div> 
<script type="text/javascript"> 
$(function () { 
$("#butten").click(function () { 
$("#hidden").show(); 
$("iframe").attr("src", "2.htm"); 
}); 
}); 
</script>

3、在1.htm和2.htm中随便写上什么都行,甚至可以直接这样写(什么html、title、body、title等均可不用写):
1.htm:
页面一<br /> 
原始页面

2.htm:
页面二<br /> 
框架加载的页面

4、效果如图:

iframe异步加载实现点击左边菜单加载右边内容实例讲解

iframe异步加载实现点击左边菜单加载右边内容实例讲解

Javascript 相关文章推荐
Javascript var变量隐式声明方法
Oct 19 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JS实现音乐导航特效
Jan 06 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
You might like
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php生成excel文件的简单方法
2014/02/08 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python使用OpenCV进行标定
2018/05/08 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
服务行业演讲稿
2014/09/02 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
毕业酒会致辞
2015/07/29 职场文书
新员工入职感言范文!
2019/07/04 职场文书
Python列表的索引与切片
2022/04/07 Python