使用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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue2实现数据请求显示loading图
Nov 28 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数组去重的函数代码
2013/02/03 PHP
php验证码实现代码(3种)
2015/09/07 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Highcharts入门之简介
2016/08/02 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python实现简单神经网络算法
2018/03/10 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python sep参数使用方法详解
2020/02/12 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
python3中确保枚举值代码分析
2020/12/02 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
医生自荐信
2013/10/11 职场文书
高三体育教学反思
2014/01/29 职场文书
商场中秋节活动方案
2014/02/07 职场文书
经理任命书模板
2014/06/06 职场文书
土建施工员岗位职责
2014/07/16 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
公司人事任命通知
2015/04/20 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书