jQuery .loadを使用すると、他のライブラリリソースへのリンクが壊れますか?
-
08-07-2019 - |
質問
divのある単純なhtmlページがあります。 jQueryを使用して、aspxアプリのコンテンツを" content"にロードしています。 div。コードは次のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
</head>
<body>
<div id="content">
<div id="loading">
<div class="loading-indicator">Loading...</div>
</div>
</div>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content").load("default.aspx");
});
</script>
</html>
問題はdefault.aspxがシャドウボックスと他のJavaScriptライブラリを使用していることです。そのコードがdefault.aspxで実行しようとすると、jsソースファイルがロードされなかったように動作します。 firebugをチェックインすると、jsファイルがあります(404または何もありません)。誰が私が欠けているのか知っていますか?ご覧のとおり、jQueryのnoConflict関数を使用しました。これは、$の使用が他のライブラリと競合する可能性があるが、そこでは助けにならないかもしれないと思ったためです...
解決
実行されていないコードはスクリプトブロックとしてレンダリングされます。ロードされたライブラリは理解していますが、そのように動的にロードされた場合、スクリプトブロックまたはインラインjavascriptは実行されません。返されるスクリプトブロックを有効にするために評価するソリューションを考え出す必要があります。プロトタイプからサンプルを掘ることができるかどうかを確認します。サンプルを持っていることを覚えています。
更新:
これはプロトタイプからそのままです...
ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>'
extractScripts: function() {
var matchAll = new RegExp(Prototype.ScriptFragment, 'img');
var matchOne = new RegExp(Prototype.ScriptFragment, 'im');
return (this.match(matchAll) || []).map(function(scriptTag) {
return (scriptTag.match(matchOne) || ['', ''])[1];
});
}
evalScripts: function() {
return this.extractScripts().map(function(script) { return eval(script) });
}
もちろん、必要に応じてそれを単純化できますが、ページが動的に返される場合、ブラウザは要素に挿入されたスクリプトを自動的に評価しないため、すべてのスクリプトを手動で評価する必要があります。
他のヒント
これを行うコードがあります。必要以上に冗長かもしれませんが、ネストされたjsファイルは問題になりません。
jQuery.get('default.aspx', null, function(data) {
$('#default').append(data);
}, 'html');
よくある問題のようです: http://andreineculau.wordpress.com/2006/09/29/ajax-ondemand-javascript-or-dynamic-script-tags/
Ajax応答が任意のスクリプトを実行するのを防ぐために、ブラウザーに組み込まれたセキュリティだと思います。