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

2024-10-22 01:32:54

一、问题分析

对于后台系统，相比大家都有所印象，知道其中的布局结构，如图：

在这种布局中我们需要将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失效问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

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

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

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

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

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

相关推荐

随机推荐