前提条件
- 画面全体は遷移しない。htmlを非同期ロードして一部のdivエリアの置き換えを行う。
便宜上最初に読み込まれるhtmlを親画面、非同期ロードされる側を子画面と呼ぶ。 - 親画面は、子画面の初期化に必要なものが何か知らない。どのhtmlを呼ぶかは知らない。
- 親画面1つに対して、子画面を複数ロードしない。
- test.html 親画面
- test.js 親画面初期化スクリプト
- screenManager.js 子画面置き換え処理スクリプト
- subscreen
- subscreen.html 子画面
- subscreen.js 子画面初期化スクリプト
概要
- 子画面は必要とするjavascriptファイルのURLを値に持つhiddenフィールドを持つ
- 子画面置き換え処理スクリプトは、上記のhiddenフィールド値を参照して、javascriptファイルを取得する
- javascriptファイルのURLを相対パスで書く場合、その基準位置は子画面htmlではない。
- 子画面初期化スクリプトが、遷移の度にロードされる。
- CommonJSとかClosureを使えよ。
親画面(test.html)
<html>
<head>
</head>
<body>
<div class="subScreenArea">
<p>initial contents</p>
</div>
<input type="button" id="changeScreen" value="screenChange" /> <br>
<input type="text" id="loginId" />
<input type="button" id="completing" value="completing" />
<div id="scriptDeclaration">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="module.js"></script>
<script src="test.js"></script>
</div>
</body>
</html>
親画面初期化スクリプト(test.js)
var mymodule = mymodule || {};
mymodule.require('./screenManager.js');
mymodule.require('./completed.js');
$(function(){
$('#completing').click(function(){
$('#loginId').val(mymodule.compl.getCompletedScript());
});
$('#changeScreen').click(function(){
mymodule.scr.change('subscreen/subscreen.html');
});
});
子画面(subscreen/subscreen.html)
<html>
<head>
</head>
<body>
<div class="subscreenArea">
<input type="text" id="subText">
<input type="button" id="subButton" value="Push">
<input type="hidden" class="requireScript" value="./subscreen/subscreen.js">
</div>
</body>
</html>
子画面初期化スクリプト(subscreen/subscreen.js)
$(function(){
console.log('require script loaded.');
$('#subButton').click(function(){
$('#subText').val('clicked');
});
});
子画面取得スクリプト(screenManager.js)
function ScreenManager(){
console.log('ScreenManager is loaded.');
this.screenClass = 'subScreenArea';
}
ScreenManager.prototype.change = function(url){
$('.' + this.screenClass).load(url + ' .' + this.screenClass, function(){
$.each($(this).find('input.requireScript'), function(){
console.log('loading ' + $(this).val());
$.getScript($(this).val());
});
});
};
var mymodule = mymodule || {};
mymodule.scr = new ScreenManager();
0 件のコメント:
コメントを投稿