iframe异步加载(点击左边菜单加载右边内容)

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

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

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

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

View Code
 1     <div style="width: 20%; float: left">
 2         <div id="butten" style="cursor: pointer;">
 3             局部刷新(框架加载页面)
 4         </div>
 5         <div id="hidden" style="display: none">
 6             我是隐藏的,点击局部刷新之后<br />
 7             我就显示,页面加载我不会消失
 8         </div>
 9     </div>
10     <div id="page" style="width: 80%; float: right;">
11         <iframe src='1.htm' frameborder='0' style='border: 0; width: 100%; height: 99.4%;'>
12         </iframe>
13     </div>
14     <script type="text/javascript">
15         $(function () {
16             $("#butten").click(function () {
17                 $("#hidden").show();
18                 $("iframe").attr("src", "2.htm");
19             });
20         });
21     </script>

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

    1.htm:

1 页面一<br />
2 原始页面

  2.htm:

1 页面二<br />
2 框架加载的页面

4、效果如图:

 

posted @ 2013-03-03 09:03  PAGE珑夫  阅读(958)  评论(0编辑  收藏  举报