Javascript 使用包含所有脚本的jQuery动态内容_Javascript_Jquery_Angularjs

Javascript 使用包含所有脚本的jQuery动态内容

javascript jquery angularjs

Javascript 使用包含所有脚本的jQuery动态内容,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我试图将所有页面链接在一起，并在另一个页面中仅显示一个页面的内容，包括所有脚本。is正在使用.load（）函数，但我被告知它不包括脚本，而且我还必须在一个页面到另一个页面中使用angularJS输入，因此我尝试了以下方法： $('nav a').on('click', function(e) { // User clicks nav link e.preventDefault(); // Stop

我试图将所有页面链接在一起，并在另一个页面中仅显示一个页面的内容，包括所有脚本。is正在使用.load（）函数，但我被告知它不包括脚本，而且我还必须在一个页面到另一个页面中使用angularJS输入，因此我尝试了以下方法：

$('nav a').on('click', function(e) {                 // User clicks nav link
  e.preventDefault();                                // Stop loading new link
  var url = this.href;                               // Get value of href

  $('nav a.current').removeClass('current');         // Clear current indicator
  $(this).addClass('current');                       // New current indicator
  $('#container').remove();                          // Remove old content
  $('#content').load(url + ' #container').hide().fadeIn('slow'), function(){
//these are all the scripts in the pages:
$.getScript('https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
$.getScript('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js');
    $.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCzkXXGUHTJkR86sa0L4CrpmFmytuKWJ8k&callback=initMap');
    $.getScript('js/geolocation.js');
    $.getScript('js/angular-controller.js');
    $.getScript('js/valid.js');
    $.getScript('js/validate.js');
    $.getScript('js/angular-external-data.js');
  }    
});

这也不会加载脚本。还有更好的办法包括脚本吗？提前感谢。

您使用单页应用程序的想法很好，但您的做法是错误的

我会按照@Chris Satchell在评论中所说的做，将所有

/js/

文件打包成一个

bundle.js

然后在HTML的

中，添加所需的所有脚本：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzkXXGUHTJkR86sa0L4CrpmFmytuKWJ8k&callback=initMap"></script>

  <!-- BUNDLED JAVASCRIPT FILE -->
  <script src="/js/main.js"></script>
</head>

将此作为您的HTML：

<!-- NAV BAR -->
<li><a href="page1">Page 1</a></li>
<li>a href="page2">Page 2</a></li>


<!-- COMPONENTS -->
<div id="page1-content">
  <!-- component stuff -->
</div>

<div id="page2-content" style="display:none">
  <!-- component stuff -->
</div>



a href=“page2”>第2页

您使用单页应用程序的想法是好的，但您的做法是错误的

我会按照@Chris Satchell在评论中所说的做，将所有

/js/

文件打包成一个

bundle.js

然后在HTML的

中，添加所需的所有脚本：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzkXXGUHTJkR86sa0L4CrpmFmytuKWJ8k&callback=initMap"></script>

  <!-- BUNDLED JAVASCRIPT FILE -->
  <script src="/js/main.js"></script>
</head>

将此作为您的HTML：

<!-- NAV BAR -->
<li><a href="page1">Page 1</a></li>
<li>a href="page2">Page 2</a></li>


<!-- COMPONENTS -->
<div id="page1-content">
  <!-- component stuff -->
</div>

<div id="page2-content" style="display:none">
  <!-- component stuff -->
</div>



a href=“page2”>第2页

这只是一个概念性的想法，但在主页上作为一个捆绑包加载要好99%。

这是唯一值得做的，如果你的js文件是巨大的！！！！！比如每一个都大于500kb，而且有很多。如果它们不被使用的话，你也不想后悔装了它们

同样，如果他们不想在每次访问中使用

未经测试-仅在概念上给出想法

--主页

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- ... ommited other core script -->

  <!-- ... custome everypage scripts -->
  <script src="/main.js"></script>
</head>

--------------------------脚本结束

只是关于可以做什么的概念性想法，但将其作为一个包加载到主页面上要好99%。

这是唯一值得做的，如果你的js文件是巨大的！！！！！比如每一个都大于500kb，而且有很多。如果它们不被使用的话，你也不想后悔装了它们

同样，如果他们不想在每次访问中使用

未经测试-仅在概念上给出想法

--主页

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- ... ommited other core script -->

  <!-- ... custome everypage scripts -->
  <script src="/main.js"></script>
</head>

--------------------------脚本结束

为什么不捆绑它们并正常添加它们？@ChrisSatchell我确实尝试过这样做，但也不起作用。我还试着把所有的脚本标签都放在每一页上，但没用。我想我不明白？为什么？你想做什么的目的是什么？@Seabizkit这样，我想让页面不必每次都加载。@shrijesshiwakoti我是说你做得不对，但在我得出结论之前，我想我会得到澄清。除雾器取下onclick。在实际视图中简单地使用它比您尝试的单击实现要好。您可以在js中有一个部分，用于检查其是否已加载。如果您试图实现一个基于使用情况的场景。但是如果你的新朋友喜欢这个东西，那么在main中加载可能会更好。为什么不将它们打包并正常添加呢？@ChrisSatchell我确实尝试过这样做，但也不起作用。我还试着把所有的脚本标签都放在每一页上，但没用。我想我不明白？为什么？你想做什么的目的是什么？@Seabizkit这样，我想让页面不必每次都加载。@shrijesshiwakoti我是说你做得不对，但在我得出结论之前，我想我会得到澄清。除雾器取下onclick。在实际视图中简单地使用它比您尝试的单击实现要好。您可以在js中有一个部分，用于检查其是否已加载。如果您试图实现一个基于使用情况的场景。但是如果你的新朋友对这件事感兴趣的话，在main中加载可能会更好。