时间戳

首页 > 解决方案 > Jquery加载方法与子页面外部脚本冲突当前脚本

javascript - Jquery加载方法与子页面外部脚本冲突当前脚本

问题描述

我有一个带有仪表板菜单和主要内容部分的免费模板。我希望当用户单击菜单链接时，子页面将被加载到主要内容部分。由于一些问题，我不想用户嵌入标签或 iframe，所以我尝试了 Jquery 加载方法和 $.ajax。问题是菜单包含 2 个外部脚本（bootstrap 和 jquery）；加载子页面时，他们不理解菜单的脚本。但是，如果我将 2 个更多相同的脚本标签添加到子页面或使用 $.getScript()，则加载的子页面但 jquery.js 和 bootstrap.js 似乎发生冲突并且以错误的方式工作。

主要代码

<html>
<head>// Some css link</head>
<body>
    <!-- Menu -->
    <div class="menu">
        <ul class="list">
            <li class="header">MAIN NAVIGATION</li>
            <li class="active">
                <a href="index.html">
                    <i class="material-icons">home</i>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="setPage('child.jsp')">
                    <i class="material-icons">text_fields</i>
                    <span>Child page</span>
                </a>
            </li>
        </ul>
    </div>

    <section class="content" id="main-content">
    </section>

    <!-- Jquery Core Js -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--Bootstrap Core Js-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>
    <!-- Select Plugin Js -->
    <script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
    <script>
        function setPage(page) {
            $.ajax({
                url: page,
            }).done(function (data) {
                $("#main-content").html(data);
                // $.getScript("plugins/jquery/jquery.min.js");
                // $.getScript("plugins/bootstrap/js/bootstrap.js");
                // $.getScript("plugins/bootstrap-select/js/bootstrap-select.js");
                // $.getScript("plugins/jquery-countto/jquery.countTo.js")
            });

        }
    </script>
</body>

子代码

    <div class="info-box bg-pink hover-expand-effect">
        <div class="icon">
            <i class="material-icons">playlist_add_check</i>
        </div>
        <div class="content">
            <div class="text">NEW TASKS</div>
            <div class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div>
        </div>
    </div>

如果我在没有 $.getScript 的情况下运行，子页面加载到部分但只有内容和 css，js 不起作用。如果我使用 $.getScript 运行（或将外部脚本放在子页面中），则使用 js 加载的子页面但 jquery 和 bootstrapsjs 会出现一些意外动画错误。

非常感谢你们。

标签： javascriptjquery

解决方案

一旦页面上有 jQuery（和引导程序），就无需重新添加它们。获取包含脚本的内容将在页面上执行。请注意，我在菜单中添加了一个类，并在加载时执行。

在这里，我使用 jQuery “伪造” ajax Deferred- jQuery.ajax()返回一个 deferred，所以它真的可以是一个很好的伪造品。

请注意，我注释掉了console.log()以使此示例更清晰，但您可以取消注释以查看它们以查看每个步骤的内容。

注意只是为了清楚 jQuery

$.getScript(myurl);

是一个别名

$.ajax({ url: myurl, dataType: "script", success: success });

所以，鉴于我也为独立脚本添加了一个假的 ajax。

// this is fake ajax content
var ccode = '<div class="info-box bg-pink hover-expand-effect"><div class="icon"><i class="material-icons">playlist_add_check</i></div><div class="content"><div class="text">NEW TASKS</div><div class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div></div></div><scr';
ccode += 'ipt>$(".menu").addClass("showAction")</scr';
ccode += 'ipt>';
// this is fake script content
var fakeScript = '<scr' + 'ipt>$("#main-content").addClass("showScriptLoaded")</scr';
fakeScript += 'ipt>';
// this is fake script content
var otherFakeScript = '<scr' + 'ipt>console.log("proof"+$(".goodchild").text());$(".goodchild").append(" says Howdy!");</scr';
otherFakeScript += 'ipt>';

// just for the demo, think of this as ajax
function getFakeAjax(deferred) {
  //console.log('in fake ajax');
  deferred.then(function(data) {
      //console.log('fake stuff then');
      return data;
    })
    .done(function(data) {
      //console.log('fake ajax data', data);
      $("#main-content").html(data);
      // kick off fakescript load
      var def2 = $.Deferred(getFakeScript);
      // pass that fake ajax object
      def2.resolve(fakeScript);
    })
    .fail(function() {});
}
// just for the demo, think of this as getScript
function getFakeScript(deferred2) {
  //console.log('in fake ajax');
  deferred2.then(function(data) {
      //console.log('fake stuff then');
      return data;
    })
    .done(function(data) {
      if (jQuery) {
        // jQuery is loaded  
        alert("Yeah! well duh we just used it");
      } else {
        // jQuery is not loaded
        alert("Doesn't Work");
      }
      //console.log('fake ajazx script', data);
      $(data).appendTo("#main-content");
    })
    .fail(function() {});
}

function setPage(page) {
  //console.log('setPage', page);
  // I used the fake for this
  //  $.ajax({
  //   url: page,
  //  }).done(function(data) {
  //   $("#main-content").html(data);
  // });

  // call the fake the ajax
  var def = $.Deferred(getFakeAjax);
  // fax ajax done (second one)
  def.done(function(data) {
    // pretend our server is slow to load first script
    // 4 seconds later kick off second fakescript load
    setTimeout(function() {
      var def2 = $.Deferred(getFakeScript);
      // pass that fake ajax object
      def2.resolve(otherFakeScript);
    }, 4000);
  })
  // pass that fake ajax object
  def.resolve(ccode);
}
.showAction {
  border: solid lime 2px;
}

.showScriptLoaded {
  border: solid red 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet" />

<body>
  <div class="menu">
    <ul class="list">
      <li class="header">MAIN NAVIGATION</li>
      <li class="active">
        <a href="index.html">
          <i class="material-icons">home</i>
          <span>Home</span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);" onclick="setPage('child.jsp')">
          <i class="material-icons">text_fields</i>
          <span class="goodchild">Child page</span>
        </a>
      </li>
    </ul>
  </div>
  <section class="content" id="main-content">get content here
  </section>
</body>

推荐阅读