JSを動的に挿入してコールバック関数を即時実行する方法

JSを動的に挿入してコールバック関数を即時実行する方法_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:04:33

オリジナル

1614 人が閲覧しました

この記事の例では、動的に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 プログラミングのすべての人に役立つことを願っています。