ホームページ > ウェブフロントエンド > jsチュートリアル > JSを動的に挿入してコールバック関数を即時実行する方法_JavaScriptスキル

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

WBOY
リリース: 2016-05-16 15:04:33
オリジナル
1590 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート