使用jQuery的load方法设计动态加载及解决被加载页面js失效问题


Posted in Javascript onMarch 01, 2017

一、问题分析

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

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

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

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

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

二、load方法详解

1.定义

$(selector).load(URL,data,callback);

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

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

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

 2.示例

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

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

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

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

$("#div1").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代码加载到布局页面的<div id="content"></div>中这样每次load()的时候content的内容都会被覆盖,所以也不必担心重复加载的问题。这样就完美解决被加载页面js失效的问题。具体代码如下所示:

四、代码示例

布局页面:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
 </head>
 <body class="hold-transition skin-blue-light sidebar-mini" onload="onload();">
  <div class="wrapper">
   <div id="header">
   </div>
   <!-- Left side column. contains the logo and sidebar -->
   <div id="sidebar">
   </div>
   <!-- Content Wrapper. Contains page content -->
   <div id="content" class="content-wrapper clearfix">
    <!-- Content Header (Page header) -->
   </div>
   <!-- /.content-wrapper -->
   <div id="footer">
   </div>
   <!-- Add the sidebar's background. This div must be placed
  immediately after the control sidebar -->
   <div class="control-sidebar-bg"></div>
  </div>
  <!-- ./wrapper -->
  <!-- jQuery 2.2.3 -->
  <script src="../resources/plugins/jQuery/jquery-2.2.3.min.js"></script>
  <!-- Bootstrap 3.3.6 -->
  <script src="../resources/bootstrap/js/bootstrap.min.js"></script>
  <!--左侧菜单-->
  <script src="../resources/dist/js/common/global.js"></script>
  <script src="../resources/dist/js/menu/menuTemplate.js"></script>
  <script src="../resources/dist/js/menu/menu.js"></script>
 </body>
<script>
 //加载页面布局的header,sidebar,footer的内容
 $("#header").load("inc/header.html");
 $("#sidebar").load("inc/sidebar.html");
 $("#footer").load("inc/footer.html");
 /*
 *加载变换内容,主要url参数为dom对象,并且该dom中的url放在href中,
 *调用方式如:<span onclick="javascript:load(this);" href="/backstage/website/test.html" rel="external nofollow" rel="external nofollow" >测试</span>
 *注意: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');
  });
 }
</script>
</html>

被加载页面:

<div id="content">
 <div>测试二</div>
 <span onclick="javascript:load(this);" href="/backstage/website/test.html" rel="external nofollow" rel="external nofollow" >测试</span>
 <a href="javascript:test();" rel="external nofollow" >测试</a>
 <script>
  function test(){
   alert("测试二页面");
  }
 </script>
 <script>
  function test2(){
   alert("ceshi");
  }
 </script>
</div>

效果截图:

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

以上所述是小编给大家介绍的使用jQuery的load方法设计动态加载及解决被加载页面js失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
js 幻灯片的实现
Dec 06 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery表单验证之密码确认
May 22 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 #Javascript
js实现带三角符的手风琴效果
Mar 01 #Javascript
JavaScript拖动层Div代码
Mar 01 #Javascript
vue组件间通信解析
Mar 01 #Javascript
性能优化之代码优化页面加载速度
Mar 01 #Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 #Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
You might like
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
vue实现搜索功能
2019/05/28 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
作风年建设汇报材料
2014/08/14 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
小学中队活动总结
2015/05/11 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
三下乡活动心得体会
2016/01/23 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
关于Python使用turtle库画任意图的问题
2022/04/01 Python