使用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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php实现登陆模块功能示例
2016/10/20 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
parser.add_argument中的action使用
2020/04/20 Python
Python识别验证码的实现示例
2020/09/30 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
生日邀请函范文
2014/01/13 职场文书
个人实习生的自我评价
2014/02/16 职场文书
药店促销活动策划方案
2014/08/24 职场文书
2014年调度员工作总结
2014/11/19 职场文书
三八节活动简报
2015/07/20 职场文书
2016年校长新年寄语
2015/08/17 职场文书
高二数学教学反思
2016/02/18 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫