首页 web前端 js教程 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

Jun 30, 2017 pm 02:26 PM
jquery js load

一、问题分析

对于后台系统,相比大家都有所印象,知道其中的布局结构,如图:

在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化

这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里

使用jquery的load方法来处理这种页面布局框架。

二、load方法详解

1

2

1.定义

  $().load(,,);

登录后复制

  必需的 URL 参数规定您希望加载的 URL。

  可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

  可选的 callback 参数是 load() 方法完成后所执行的函数名称。

 2.示例

  • 也可以把 jQuery 选择器添加到 URL 参数。

    下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <p> 元素中:

1

    $("#p1").load("demo_test.txt #p1");

登录后复制
  • 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的


1

2

3

4

$("#p1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    if(statusTxt=="success")

      alert("外部内容加载成功!");    if(statusTxt=="error")

      alert("Error: "+xhr.status+": "+xhr.statusText);

  });

登录后复制

三、布局框架load的使用

1.问题

  网上很多人在使用load方法加载动态页面的时候遇到一个普遍的问题,就是在被加载页面中的JavaScript代码失效,这是因为load加载的外部文件会把Script部分删除掉,所以被加载页面中调用该页面的JavaScript的时候就会出现xxxfunction未定义。

2.解决

  • 对于header,sidebar,footer这种只包含静态HTML代码的部分直接使用load加载

  • 对应中间content变化的内容,一般都会包含对应的JavaScript代码,使用自定义的load方法(如下代码),在使用jquery.load()方法加载对应的内容的同时,使用load的回调方法处理JavaScript的加载,将被加载页面的JavaScript代码加载到布局页面的<p id="content"></p>中这样每次load()的时候content的内容都会被覆盖,所以也不必担心重复加载的问题。这样就完美解决被加载页面js失效的问题。具体代码如下所示:

四、代码示例

布局页面:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

&lt;!DOCTYPE html&gt;

&lt;html&gt;

 

    &lt;head&gt;

        &lt;meta charset=&quot;utf-8&quot;&gt;

        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;

        &lt;title&gt;&lt;/title&gt;

        &lt;!-- Tell the browser to be responsive to screen width --&gt;

        &lt;meta content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot; name=&quot;viewport&quot;&gt;

        &lt;!-- Bootstrap 3.3.6 --&gt;

        &lt;link rel=&quot;stylesheet&quot; href=&quot;../resources/bootstrap/css/bootstrap.min.css&quot;&gt;       

    &lt;/head&gt;

 

    &lt;body class=&quot;hold-transition skin-blue-light sidebar-mini&quot; onload=&quot;onload();&quot;&gt;

        &lt;p class=&quot;wrapper&quot;&gt;

             

            &lt;p id=&quot;header&quot;&gt;

             

            &lt;/p&gt;

             

            &lt;!-- Left side column. contains the logo and sidebar --&gt;

            &lt;p id=&quot;sidebar&quot;&gt;

             

            &lt;/p&gt;

 

            &lt;!-- Content Wrapper. Contains page content --&gt;

            &lt;p id=&quot;content&quot; class=&quot;content-wrapper clearfix&quot;&gt;

                &lt;!-- Content Header (Page header) --&gt;

                 

                 

            &lt;/p&gt;

            &lt;!-- /.content-wrapper --&gt;

 

            &lt;p id=&quot;footer&quot;&gt;

             

            &lt;/p&gt;

             

            &lt;!-- Add the sidebar&#39;s background. This p must be placed

       immediately after the control sidebar --&gt;

            &lt;p class=&quot;control-sidebar-bg&quot;&gt;&lt;/p&gt;

 

        &lt;/p&gt;

        &lt;!-- ./wrapper --&gt;

 

        &lt;!-- jQuery 2.2.3 --&gt;

        &lt;script src=&quot;../resources/plugins/jQuery/jquery-2.2.3.min.js&quot;&gt;&lt;/script&gt;

        &lt;!-- Bootstrap 3.3.6 --&gt;

        &lt;script src=&quot;../resources/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

         

        &lt;!--左侧菜单--&gt;

        &lt;script src=&quot;../resources/dist/js/common/global.js&quot;&gt;&lt;/script&gt;

        &lt;script src=&quot;../resources/dist/js/menu/menuTemplate.js&quot;&gt;&lt;/script&gt;

        &lt;script src=&quot;../resources/dist/js/menu/menu.js&quot;&gt;&lt;/script&gt;

    &lt;/body&gt;

&lt;script&gt; //加载页面布局的header,sidebar,footer的内容

 $("#header").load("inc/header.html");

 $("#sidebar").load("inc/sidebar.html");

 $("#footer").load("inc/footer.html"); 

 /*

 *加载变换内容,主要url参数为dom对象,并且该dom中的url放在href中,

 *调用方式如:&lt;span onclick=&quot;javascript:load(this);&quot; href=&quot;/backstage/website/test.html&quot;&gt;测试&lt;/span&gt;

 *注意:1.该dom对象最好不要用a标签,因为点击a标签会进入href指定的页面

 *      2.要加载的内容要用 id="content" 标注,因为load中指明了加载页面中指定的id为content下的内容

 *    3.对应页面的JavaScript写在content下 */

 function load(url, data){     //alert($(url).attr("href"));

     $.ajaxSetup({cache: false });

     $("#content").load($(url).attr("href")+ " #content ", data, function(result){         //alert(result);

         //将被加载页的JavaScript加载到本页执行

         $result = $(result); 

         $result.find("script").appendTo('#content');

     });

 

 }&lt;/script&gt;

&lt;/html&gt;

登录后复制

 

被加载页面:


1

2

3

4

5

6

7

8

9

10

11

&lt;p id=&quot;content&quot;&gt;

    &lt;p&gt;测试二&lt;/p&gt;

    &lt;span onclick=&quot;javascript:load(this);&quot; href=&quot;/backstage/website/test.html&quot;&gt;测试&lt;/span&gt;

    &lt;a href=&quot;javascript:test();&quot;&gt;测试&lt;/a&gt;

    &lt;script&gt;        function test(){

            alert("测试二页面");

        }    &lt;/script&gt;

    &lt;script&gt;        function test2(){

            alert("ceshi");

        }    &lt;/script&gt;

&lt;/p&gt;

登录后复制

效果截图:

以上是使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

推荐:优秀JS开源人脸检测识别项目

jQuery引用方法详解:快速上手指南 jQuery引用方法详解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解:快速上手指南

jQuery中如何使用PUT请求方式? jQuery中如何使用PUT请求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式?

jQuery如何移除元素的height属性? jQuery如何移除元素的height属性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性?

jQuery小技巧:快速修改页面所有a标签的文本 jQuery小技巧:快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改页面所有a标签的文本

使用jQuery修改所有a标签的文本内容 使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a标签的文本内容

js和vue的关系 js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系

JS 的 AI 时代来了! JS 的 AI 时代来了! Apr 08, 2024 am 09:10 AM

JS 的 AI 时代来了!

See all articles