使用包含所有腳本的jQuery的動態內容

我想將所有頁面鏈接在一起，並且只顯示另一頁面的內容，包括所有腳本。 IS是使用.load（）函數，但我被告知，它不包括腳本，我也不得不使用angularJS輸入一個網頁到另一個，所以我嘗試這樣做：使用包含所有腳本的jQuery的動態內容

$('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'); 
    }  
});

這不加載腳本。還包括腳本嗎？提前致謝。

來源

2017-06-24 Shrijesh Siwakoti

爲什麼不捆綁它們並正常添加它們？ –

@ChrisSatchell我的確嘗試過這樣做，但它也沒有奏效。我也嘗試通過在每個頁面中保留所有這些腳本標籤，這些標籤不會枯萎。 –

我想我不明白？爲什麼？你想要做什麼的目標是什麼？ – Seabizkit

你有一個單頁面應用程序的想法是好的，但你做錯了。

我會做什麼@克里斯薩切爾在他的評論中說，並捆綁所有/js/文件放到一個bundle.js

然後在你的HTML的<head>，添加你需要的所有腳本：

<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>

然後，不要在每次點擊導航欄項目時從網址加載組件。所有的腳本加載一次後，你的頁面會快很多。

另一個好處的情況是，它使你的代碼容易得多：

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

    $('nav a.current').removeClass('current');   // Clear current indicator 
    $(this).addClass('current');      // New current indicator 
    $('#' + currentUrl + '-content').hide();    // Hide old content 
    $('#' + url + '-content').show();    // Show new content 
});`

以此作爲你的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>

來源

2017-06-27 00:53:49 krummens

什麼可以做的只是概念性的想法，但在主頁面上加載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>

--injected意見，使用類似下面

-------- ------------------ view start

<script> 

    var url = '"/views/login.js"' 

    if (typeof loginFunctions == 'undefined') 
    { 
     //untested but just some code to add file to main page. 
     $.loadScript(url, function(){ 


     }); 
    } 
</script> 

<div> 
    some html for the view 
</div>

----------------------- ---查看結束

--scripy login.js --------------------------腳本啓動

//where this only exists here. 
var loginFunctions = { 

}

---- ----------------------腳本結束

來源

2017-06-28 11:01:36 Seabizkit

使用包含所有腳本的jQuery的動態內容

回答

相關問題