すべてのスクリプトを含むjQueryを使用した動的コンテンツ

すべてのページをリンクし、すべてのスクリプトを含む別のページの内容のみを表示しようとしています。 ISは.LOAD（）関数を使用していたが、私はこの試みた私はそれは、スクリプトが含まれていないと言われたと私はまた、他の1つのページに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

1ページのアプリケーションを作成するというあなたの考えは良いですが、間違ったやり方です。

私は@クリスサッチェルは、彼のコメントで言った何をして、HTMLの<head>に続いて1 bundle.js

にあなたの/js/すべてのファイルをバンドルし、あなたが必要とするすべてのスクリプトを追加します。

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

次に、ナビゲーションバーの項目をクリックするたびに、URLからコンポーネントをロードしないでください。すべてのスクリプトを一度読み込むだけで、ページの処理速度が大幅に向上します。

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

何ができるかの単なる概念のアイデア、しかし：あなたのHTMLとしてこれにより

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

：

これに別のボーナスは、それは非常に簡単にあなたのコードなることですメインページをバンドルとして読み込む方が99％優れています。

これは、jsファイルが巨大な場合にのみ役立ちます!!!!! 500kb以上のものがたくさんあります。あなたはそれらが使用されていないような場合は、それらの読み込みのペニシティを取るしたくないです。

また、訪問ごとに使用する必要がない場合にのみ、

未テスト - ちょうど概念的なアイデアに

--Mainページを与える

<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景色、以下

のようなものを使用-------- ------------------表示開始

----------------------- ---終わりを見る

--scripy login.js --------------------------スクリプトが

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

}

を開始します---- ----------------------スクリプトの終了

出典

2017-06-28 11:01:36 Seabizkit

すべてのスクリプトを含むjQueryを使用した動的コンテンツ

答えて

関連する問題