使用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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
webpack实用小功能介绍
Jan 02 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
分分钟玩转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弹出对话框技巧详细解读
2015/09/26 PHP
Smarty变量用法详解
2016/05/11 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
Python之re操作方法(详解)
2017/06/14 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
销售人员自我评价
2014/02/01 职场文书
文明演讲稿范文
2014/05/12 职场文书
社区科普工作方案
2014/06/03 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
关于环保的广播稿
2015/12/17 职场文书
2019同学聚会主持词
2019/05/06 职场文书