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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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获取网站域名和地址的代码
2008/08/17 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
div层的移动及性能优化
2010/11/16 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
学习Vue组件实例
2018/04/28 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
学生党员思想汇报
2013/12/28 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
元旦主持词开场白
2015/05/29 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书