使用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失效问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

    应用场景 在开发"发送短信验证"功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题.一般原理是"当点击发送按钮时,发送ajax请求到服务器发送短信验证码,成功则把发送按钮设置为不可点击,并且调用定时器,按钮显示倒计时".如果就这样不对倒计时存储做处理,那么当刷新页面,会出现倒计时失效,按钮可点击.提供以下解决方案: 利用cookie存储倒计时 利用HTML5的localStorage 存储倒计时 利用cookie存储倒计时 发送成功后把剩余倒计时存储到coo

  • JS出现失效的情况总结

    对于大前端来说,JS可谓是我们的神器,从页面的效果到数据的传递,再到后台的业务,无处不充斥着JS的身影,但是万能的JS也有贪玩的时候,某一时刻你就有可能发现你形影不离的JS突然间罢工了,这对我们前端来说绝对是头痛的事,作为前端君的我今天就和大家聊聊有哪些情况会导致JS突然性的罢工.  1.JS出现错误,比如函数没有闭合,JS的标签出现错误等等情况,都会使得JS不能执行,这时如果不能发现错误,就会陷入JS貌似挂掉了的情况,也给开发工作造成困扰.  2.还有一种情况就是你苦苦修改的页面发现并不是你运

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8

    经过分析发现,这个是因为页面中html与js编码不一致导致的,一般情况最好统一标准的utf8的 上网找了找,木有找到相关的解决办法,索性自己试了试. 原页面是这样写的: <html> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8" /> <script type="text/javascript" src=&

  • js 开发之autocomplete="off"在chrom中失效的解决办法

    js 开发之autocomplete="off"在chrom中失效的解决办法 问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息.这时,在输入框中添加属性:autocomplete="off",一般能达到目的.而在chrom里面就失效. 失效的原因是:浏览器会根据输入框的input的type属性为password的时候,自动将用户名和密码框填充. 解决方法:因为浏览器是否自动填充内容,根据type=password来判断的.此时先将作为密码的输入

  • jsp 网站引入外部css或者js失效问题解决

    最近做项目,完成项目经理布置的任务,开始入门java web,但在开发过程中遇到过许许多多的问题,但是令我最头痛的还是导入外部css一直失效,困扰许久才找出原因. 路径问题 css或者js导入失效最有可能的原因就是路径错误,这里我给出我的网站目录结构,大家可以参考下. 导入css代码: <link rel="stylesheet" type="text/css" href="css/login.css"> 记得jsp头部需要设置相对路

  • js放到head中失效的原因与解决方法

    1.今天写js碰到一个奇怪的问题,写好的js放到body里面执行,但是放到head中没有任何效果,为什么导致这种原因呢? 看失效代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

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

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

  • ASP.NET MVC使用jQuery的Load方法加载静态页面及注意事项

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; set; } public string Url { get; set; } } 在HomeController中的Index方法,向视图传递一个Article强类型. public class HomeController : Controller { public ActionResult Ind

  • jquery中load方法的用法及注意事项说明

    调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

  • jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

    本文实例讲述了jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法.分享给大家供大家参考.具体分析如下: jQuery通过load()方法载入另外一个网页文件内的指定标签内容到div标签,如果我们可以加载网页b.html中的id为p1的标签内容到网页a.html的div标签内 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> <

  • jQuery的load()方法及其回调函数用法实例

    本文实例讲述了jQuery的load()方法及其回调函数用法.分享给大家供大家参考.具体如下: 下面的js代码演示了jQuery的load()方法的使用,并演示了带回调函数(callback)的load方法的使用 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(fun

  • 防止jQuery ajax Load使用缓存的方法小结

    一.用法 jquery的load函数是请求另一个文件并加载到当前DOM里的调用,load方法的完整格式是:load( url, [data], [callback] )(注意没有参数是GET方式请求,有参数则是 POST方法). * url:是指要导入文件的地址. * data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. * callback:可选参数:是指调用load方法并得到服务器响应

  • jQuery load方法用法集锦

    调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • jquery通过load获取文件的内容并跳到锚点的方法

    本文实例讲述了jquery通过load获取文件的内容并跳到锚点的方法.分享给大家供大家参考.具体分析如下: 昨天在做一个类似于帮助文档型的页面,左边是导航,右边显示的是内容.本来打算右边内容显示区域用iframe来实现,但由于要做iframe的适应高度所以就换了一种方法,使用jquery的ajax中的load方法. 获取远程文件中的内容很容易实现,直接使用jquery的load方法: $("#content").load("xxx.aspx") 这样很容易将xxx.

  • jQuery - AJAX load() 实例用法详解

    jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合. 可选的 callback 参数是 load() 方法完成后所执行的函数名称. 这是示例文件("demo_test.txt")的内容: <h2>jQ

随机推荐