Fatal编程技术网
  • jquery/
  • 防止多次加载JQuery

防止多次加载JQuery

jquery performance jquery-mobile

防止多次加载JQuery,jquery,performance,jquery-mobile,struts2-jquery,Jquery,Performance,Jquery Mobile,Struts2 Jquery,我是JQuery Mobile的新手 我创建了一个母版页，其中包含了jquery移动脚本和css的几个链接。 在母版页中，我使用ajax将另一个页面加载到选定的div中，但在加载的页面中无法访问母版页的脚本。所以我需要在加载页面中再次加载脚本 <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> <%@ taglib prefix="

我是JQuery Mobile的新手

我创建了一个母版页，其中包含了jquery移动脚本和css的几个链接。 在母版页中，我使用ajax将另一个页面加载到选定的div中，但在加载的页面中无法访问母版页的脚本。所以我需要在加载页面中再次加载脚本

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1 , maximum-scale=1">

<script src="../resources/template/js/base/jquery-1.7.2.min.js"></script>
<link type="text/css" href="../resources/jquery.window.css" rel="stylesheet">
<script type="text/javascript" src="../resources/jquery.windowAlt.js"></script>
 <script src="../resources/template/js/base/jquery.ui.core.min.js?s2j=3.3.3" type="text/javascript"></script>
 <script src="../resources/template/js/plugins/jquery.subscribe.min.js" type="text/javascript"></script> 
 <script src="../resources/template/js/struts2/jquery.struts2-3.3.3.min.js" type="text/javascript"></script>
 <script type="text/javascript"> 
    $(function() {
        jQuery.struts2_jquery.version = "3.3.3";
        jQuery.scriptPath = "../resources/template/";
        jQuery.ajaxSettings.traditional = true;
        jQuery.ajaxSetup({cache : false});
        jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2-3.3.3.min.js");
    }); 
 </script>
 <link type="text/css" href="../resources/template/themes/flick/jquery-ui.css?s2j=3.3.3" rel="stylesheet" id="jquery_theme_link">
<script src="../resources/template/js/plugins/jquery.mobile-1.1.1.min.js"></script>
<script src="../resources/template/js/struts2/jquery.mobile.struts2-3.3.3.js" type="text/javascript"></script>  
<link rel="stylesheet" href="../resources/template/js/plugins/jquery.mobile-1.1.1.min.css" />

<title>IDP-Dashboards</title>
<SCRIPT type="text/javascript" >
 function pageRefresh() {
     location.reload(); //Reload the current page.
 }
 $(document).ready(function(){
     if ($('body').find('[data-role="header"]').width()<400) {
     $('#home_img').attr('src','../resources/img/icon_home_small.png');
        $('#logout_img').attr('src','../resources/img/icon_logout_small.png');
     }
     $(window).on('resize',function() {
     if ($('body').find('[data-role="header"]').width()<400) {
        $('#home_img').attr('src','../resources/img/icon_home_small.png');
        $('#logout_img').attr('src','../resources/img/icon_logout_small.png');
    }else{
        $('#home_img').attr('src','../resources/img/icon_home.png');
        $('#logout_img').attr('src','../resources/img/icon_logout.png');
    }
     });
 });


 $(document).on('click', '#link1', function(){
     alert("here...");
     $.ajax({
            async : false,
            type: 'POST',
            url: "./getMobileDashboard",
            data : {
                //"mode" : "viewUserThumbnails",
        },
            success : function (msg) {
                 $("#mainContent").html(msg);
            }
        });
    });
</SCRIPT>
<link href="../resources/css/ApplicationStyleSheet.css" rel="stylesheet"    type="text/css">
</head>
<body id="body">
<div data-role="page" id="dashboardPage">

    <div style="width: 100%">       
    <%-- <sj:a button="true" id="link1" href="getMobileDashboard" targets="mainContent" style="float:right;">Dashboards</sj:a> --%>
    <%-- <sj:a button="true" id="link1" href="#" onclick="test();" >Dashboards</sj:a> --%>
    <sj:a button="true" id="link1" href="#" >Dashboards</sj:a>
    </div>

    <div style="width: 100%">
    <sj:a button="true" id="link2" href="getMobileDynamicForms" targets="mainContent" style="float:left;">Forms</sj:a>
    </div>

    <div data-role="content"  id="mainContent" style="padding: 0px;">   </div>
</div>
</body>
</html>
这增加了加载时间，有人能帮我解决这个问题吗

任何建议都会有帮助的，谢谢

已编辑

母版页代码。在此页面中有一个Id为=>“mainContent”的div。在这个div中，我试图在点击带有id“link1”或“link2”的锚时加载我的另一个页面

点击link1我调用ajax，点击link2在给定目标上加载

在这两种情况下，若所有脚本都包含在加载的页面中，那个么它都可以正常工作

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjm" uri="/struts-jquery-mobile-tags" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1 , maximum-scale=1">

<script src="../resources/template/js/base/jquery-1.7.2.min.js"></script>
<link type="text/css" href="../resources/jquery.window.css" rel="stylesheet">
<script type="text/javascript" src="../resources/jquery.windowAlt.js"></script>
 <script src="../resources/template/js/base/jquery.ui.core.min.js?s2j=3.3.3" type="text/javascript"></script>
 <script src="../resources/template/js/plugins/jquery.subscribe.min.js" type="text/javascript"></script> 
 <script src="../resources/template/js/struts2/jquery.struts2-3.3.3.min.js" type="text/javascript"></script>
 <script type="text/javascript"> 
    $(function() {
        jQuery.struts2_jquery.version = "3.3.3";
        jQuery.scriptPath = "../resources/template/";
        jQuery.ajaxSettings.traditional = true;
        jQuery.ajaxSetup({cache : false});
        jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2-3.3.3.min.js");
    }); 
 </script>
 <link type="text/css" href="../resources/template/themes/flick/jquery-ui.css?s2j=3.3.3" rel="stylesheet" id="jquery_theme_link">
<script src="../resources/template/js/plugins/jquery.mobile-1.1.1.min.js"></script>
<script src="../resources/template/js/struts2/jquery.mobile.struts2-3.3.3.js" type="text/javascript"></script>  
<link rel="stylesheet" href="../resources/template/js/plugins/jquery.mobile-1.1.1.min.css" />

<title>IDP-Dashboards</title>
<SCRIPT type="text/javascript" >
 function pageRefresh() {
     location.reload(); //Reload the current page.
 }
 $(document).ready(function(){
     if ($('body').find('[data-role="header"]').width()<400) {
     $('#home_img').attr('src','../resources/img/icon_home_small.png');
        $('#logout_img').attr('src','../resources/img/icon_logout_small.png');
     }
     $(window).on('resize',function() {
     if ($('body').find('[data-role="header"]').width()<400) {
        $('#home_img').attr('src','../resources/img/icon_home_small.png');
        $('#logout_img').attr('src','../resources/img/icon_logout_small.png');
    }else{
        $('#home_img').attr('src','../resources/img/icon_home.png');
        $('#logout_img').attr('src','../resources/img/icon_logout.png');
    }
     });
 });


 $(document).on('click', '#link1', function(){
     alert("here...");
     $.ajax({
            async : false,
            type: 'POST',
            url: "./getMobileDashboard",
            data : {
                //"mode" : "viewUserThumbnails",
        },
            success : function (msg) {
                 $("#mainContent").html(msg);
            }
        });
    });
</SCRIPT>
<link href="../resources/css/ApplicationStyleSheet.css" rel="stylesheet"    type="text/css">
</head>
<body id="body">
<div data-role="page" id="dashboardPage">

    <div style="width: 100%">       
    <%-- <sj:a button="true" id="link1" href="getMobileDashboard" targets="mainContent" style="float:right;">Dashboards</sj:a> --%>
    <%-- <sj:a button="true" id="link1" href="#" onclick="test();" >Dashboards</sj:a> --%>
    <sj:a button="true" id="link1" href="#" >Dashboards</sj:a>
    </div>

    <div style="width: 100%">
    <sj:a button="true" id="link2" href="getMobileDynamicForms" targets="mainContent" style="float:left;">Forms</sj:a>
    </div>

    <div data-role="content"  id="mainContent" style="padding: 0px;">   </div>
</div>
</body>
</html>


$（函数（）{
jQuery.struts2_jQuery.version=“3.3.3”；
jQuery.scriptPath=“../resources/template/”；
jQuery.ajaxSettings.traditional=true；
ajaxSetup（{cache:false}）；
struts2_jQuery.require（“js/struts2/jQuery.ui.struts2-3.3.min.js”）；
}); 
仪表盘
函数pageRefresh（）{
location.reload（）；//重新加载当前页面。
}
$（文档）.ready（函数（）{

if（$（'body'）.find（'[data role=“header”]'）.width（）您始终可以检查jQuery是否已加载以下内容：


if (typeof(jQuery) !== 'function') {
// add script tag here with ref to jquery
}



另外，我认为像requireJS这样的框架可以处理这类事情。
最好将ajax调用创建为json请求

然后在父页面本身的ajax响应之后处理所需的javascript功能


jQuery.ajax({
                    type: 'POST',
                    dataType:'json',
                    url:  url+'ajax.php',
                    data: {name:value},
                    beforeSend : function(){

                 }
                 })
                .done(function(data)
                {

                    //Here you will results like below
                    //data.html
                    //data.status
                    if(data.status == true)
                    // your required operation
                    // here html and status are the variables set in json encoded array.

                });


在ajax.php中


<?php
// do your php operation and set the result to a variable $result

echo json_encode('html'=>$result,'status'=>true); 
// you can set any number items in array , so that in parent window you can easily handle these items.

 ?>





为了更好地理解，您可以添加代码吗？如果您做得正确，最坏的情况是加载jQuery的缓存版本，这只需要很少的时间。您确定（a）您已正确设置为缓存jQuery，以及（b）“双重加载”吗jQuery的实际问题是什么？你能给我举个例子吗…请看我调用ajax的母版页代码。如果所有脚本都包含在加载的页面中，它可以正常工作，但如果我对脚本进行注释，它就不能正常工作。在上面的注释中添加了一个例子，使用json方法..@amitkumar12788