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高亮效果的二种实现方法
Sep 14 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
Js经典案例的实例代码
May 10 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
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 getsiteurl()函数
2009/09/05 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
python并发2之使用asyncio处理并发
2017/12/21 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
python 实现aes256加密
2020/11/27 Python
Python创建自己的加密货币的示例
2021/03/01 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
广州盈通面试题
2015/12/05 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
函授本科自我鉴定
2013/11/03 职场文书
出纳岗位职责范本
2013/12/01 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
环境整治工作方案
2014/05/18 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
植树节新闻稿
2015/07/17 职场文书
学校食堂管理制度
2015/08/04 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python