Question

我有一个带有仪表板菜单和主要内容部分的免费模板。我希望当用户点击菜单链接时，子页面将加载到主要内容部分。我不想因为一些问题而使用embed标签或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加载的子页面会出现一些意外动画。

非常感谢你们。

Answer 1

一旦你在页面上有jQuery（和bootstrap），就不需要重新添加它们。获取包含脚本的内容将在页面上执行。注意我把一小部分添加到菜单中，并在加载时执行。

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

注意我注释了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>

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

1 个答案: