2

jQueryとhistory.jsを使用して、部分ページ間の動的遷移を管理します。ドキュメント全体をリロードしないようにします。これらの部分ページの一部は、独自の独自のJavaScriptファイルを呼び出します。ページ間の遷移はうまく機能しますが、実行されたJavaScriptの残りは、それを呼び出した部分ページが動的に置き換えられた後もアクティブなままです。

動的なページの読み込みで導入され、後で非同期に別のページに置き換えられたJavaScriptをアンロードするにはどうすればよいですか?


細かいところ

マスター テンプレート

私のマスター テンプレート(すべてのページで使用) は単純なものと考えることができます。

<html>
<head>
<script>
    //scripts to manage asynchronous loading of partial-pages into #content div
</script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

ユーザープロフィール

#content div内でレンダリングされる 1 つの部分ページは、ユーザーのProfile用です。

<script src="profile.js"></script>
<form>
    <input type="file" name="profile-picture">
</form>

profile.jsの内容は次のようになります。

$(function() {
    $('input').change(function() {
        // upload profile picture asynchronously
    });
});

ユーザー設定

マスター テンプレートの#content div内に読み込まれる別の部分ページは、ユーザーの設定です。

<script src="settings.js"></script>
<form>
    <input type="text" name="first-name">
    <input type="text" name="last-name">
</form>

settings.jsの内容は次のようになります。

$(function() {
    setInterval(function() {
        // auto-submit form every 10 seconds
        $('form').submit();
    }, 10000);
}
});

問題点

  • 一部のJavaScript関数は、それらを呼び出した部分ページが別のページに置き換えられた後も引き続き実行されます ( setIntervalなど)。
  • 部分ページごとに新しいJavaScriptをロードするこの作業は面倒です。しかし、私の人生では、ベストプラクティスの推奨事項を見つけることができません.

各部分ページにページ固有のスクリプトを許可しながら、動的な部分ページのロード/アンロードのこの効果を達成するためのより良い方法は何ですか?

ありがとうございました！

4

2 に答える 2