ホームページ > 記事 > ウェブフロントエンド > JSを動的に挿入してコールバック関数を即時実行する方法_JavaScriptスキル
JSを動的に挿入してコールバック関数を即時実行する方法_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:04:331519ブラウズ
この記事の例では、動的にJSを挿入し、すぐにコールバック関数を実行する方法を説明しています。参考のために皆さんと共有してください。詳細は次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = id;
script.onload = script.onreadystatechange = function(){
alert(script.readyState);
if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
script.onreadystatechange = script.onload = null
if(callback) callback();
}
document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>
js ファイルの動的挿入は、ページの読み込み速度とクロスドメインの問題を改善する上で非常に重要な役割を果たします。上記は簡単な例です。
onreadystatechange は ie でサポートされていますが、onload はサポートされていません
onload は Firefox でサポートされていますが、onreadystatechange はサポートされていません
つまり、ロードされるかトリガーが完了する必要はなく、あるいは両方がトリガーされるため、 または を使用して判断します。
script.onreadystatechange と script.readyState の大文字と小文字の形式は大文字と小文字を区別しないため、見つけにくいエラーが発生する可能性があることに注意してください。
JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JavaScript スイッチング効果とテクニックの概要」、「JavaScript 検索アルゴリズム テクニックの概要」をチェックしてください。 🎜>"、"JavaScript アニメーションの特殊効果とテクニックのまとめ"、"JavaScript のエラーとデバッグ スキルのまとめ"、"JavaScript のデータ構造とアルゴリズム テクニックのまとめ」、「JavaScript トラバーサルのアルゴリズムとテクニックの概要」および「JavaScript 数学的演算の使用法の概要」
この記事が JavaScript プログラミングのすべての人に役立つことを願っています。