zoukankan      html  css  js  c++  java
  • iframe异步加载(点击左边菜单加载右边内容)

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

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

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

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

    View Code
     1     <div style=" 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=" 80%; float: right;">
    11         <iframe src='1.htm' frameborder='0' style='border: 0;  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、效果如图:

  • 相关阅读:
    css知识小结(更新中)
    vim的简易操作
    shell语言学习(更新中)
    An Introduction to C & GUI Programming -----Simon Long 学习笔记 1
    fread,fwrite(二)
    fread,fwrite(一)
    printf 打印颜色
    容斥原理及证明
    字典的认识和使用 day05
    列表和元祖的使用 day 04
  • 原文地址:https://www.cnblogs.com/contactwwq/p/2941233.html
Copyright © 2011-2022 走看看