使用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 基础篇之运算符、语句(二)
Apr 07 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
原生JS实现幻灯片
Feb 22 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
JS实现网站吸顶条
Jan 08 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
分分钟玩转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实现的获取URL信息的类
2007/01/02 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
ES6对象操作实例详解
2020/05/23 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解Python多线程
2016/11/14 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
财务主管的岗位职责
2013/12/30 职场文书
撤诉申请怎么写
2015/05/19 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS