私が知りたいのは、これに直角からアプローチしているかどうかです。
作成しているasp.netアプリがあります。アプリの全体的な外観にマスターページを使用しています(以下にコードを示します)。
メニューシステムにjQueryの.load()
関数のような動的ロードを使用してコンテンツをロードしてもらいたいのですが。それは大丈夫です、そして私はそれを持っています。この.load()
関数はinnerHTML
、そのコンテンツをページに送り込むために使用します。これは、そのページでモジュール固有のスクリプトとスタイルをロードする場合に問題になります。
私の質問は、このような環境で、これらのモジュールのスクリプトをどのようにロードするのですか?アプリの初期ロード時にすべてのスクリプトをロードする必要がありますか?このアプリは決して「それほど大きく」なることはありませんが、万が一に備えて正しく実行するようにしたいと思います。
マスターシート
<div id="primaryNavigation">
<ul>
<li class="current"><a href="../Default.aspx">Main</a></li>
<li><a href="../Modules/Page1.aspx">Some Overview</a></li>
<li><a href="../Modules/Page2.aspx">Reporting</a></li>
<li><a href="../Modules/Page3.aspx">More Reporting</a></li>
<li><a href="../Modules/Page4.aspx">About</a></li>
</ul>
</div>
<div id="mainContentContainer">
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
</div>
Contentタグ内のモジュールの例
<div id="container">
Inside a page
<script id="scriptToLoad" type="text/javascript">
alert('Something');
head.ready(function () { console.log('please print'); });
</script>
</div>
<div id="includeScripts">
../Files/Javascript/SomeModuleSpecificJs.js
../Files/Javascript/SomeModuleSpecificJs1.js
</div>
div
私のアイデアは、「includeScripts」のIDを持つ各モジュールにを設定し、このようなマスターシート内のメソッドからそれらをロードすることでした。この方法は機能しますが(明らかに多少の調整が必要です)、ユーザーがモジュールをクリックし続けると、最終的にすべてのファイルがロードされます。その場合は、それらすべてをマスターシートにロードすることもできます。
MasterPageがロードされたときに実行されるJS
$navigation = $("#primaryNavigation").delegate('ul li a', 'click', function () {
$('#primaryNavigation').find('li').removeClass('current');
$(this).parent().addClass('current');
$('#mainContentContainer').load($(this).attr('href') + ' #container');
// Obviously this would overwrite the content from the container, this is merely proof of concept
$('#mainContentContainer').load($(this).attr('href') + ' #includeScripts');
var jsArray = $('#includeScripts').text().trim().split("\n");
$.each(jsArray, function (index, value) {
$.getScript(value);
});
return false;
});