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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery实现的支持IE的html滑动条
Mar 16 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
JavaScript This指向问题详解
Nov 25 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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php跨服务器访问方法小结
2015/05/12 PHP
php for 循环使用的简单实例
2016/06/02 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript实现连续赋值
2015/08/10 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
焦裕禄精神心得体会
2014/09/02 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
婚礼答谢礼品
2015/01/20 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
python 调用js的四种方式
2021/04/11 Python
Linux中文件的基本属性介绍
2022/06/01 Servers