بشكل عام ، إذا تم تحميل جميع رمز JavaScript المطلوب في وقت واحد ، فسوف تبطئ صفحة الويب الأولية ، ولكن لا يلزم استخدام العديد من الرموز المحملة ، ويجب تجنب نفايات الأداء غير الضرورية. إذا كنت ترغب في تحميل رمز JavaScript ديناميكيًا ، فيمكنك استخدام نموذج DOM لإضافة عقدة <script> في مستند HTML وتعيين سمة SRC لهذه العقدة (أي ملف JavaScript للتوعية) إلى رمز JavaScript الذي يحتاج إلى تحميل ديناميكي.
فيما يلي مثال على إكمال هذه الوظيفة:
(1) إنشاء ملف JSLoaderTest.html جديد
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312"/> jsloader () {this.load = function (url) {// get all <script> tags var ss = document.getElementSbyTagName ("script") ؛ // اختبار ما إذا كان قد تم تضمين الملف المحدد. إذا تم تضمينه ، قم بإعداد حدث onsuccess والعودة لـ (i = 0 ؛ i <ss.length ؛ i ++) {if (ss [i] .src && ss [i] .src.indexof (url)! =-1) يعود؛ }} // إنشاء عقدة البرنامج النصي وتعيين سماتها على ملف javaScript التوعية s = document.createElement ("script") ؛ S.Type = "Text/JavaScript" ؛ S.Src = url ؛ // احصل على عقدة الرأس وأدخل <script> في var head = document.getElementSbyTagName ("Head") [0] ؛ head.appendchild (s) ؛ // الحصول على المرجع الخاص بك var self = this ؛ // لمتصفح IE ، استخدم حدث ReadyStateChange لتحديد ما إذا كان الحمل ناجحًا // للمتصفحات الأخرى ، استخدم حدث OnLoad لتحديد ما إذا كان الحمل ناجحًا // s.onload = S.OnReadyStatechang حدث onsuccess ، نفس الشيء أدناه. if (this.readyState && this.readyState == "loading") return ؛ الذات. } s.onerror = function () {head.removechild (s) ؛ self.onfailure () ؛ }} ؛ // تحديد حدث نجاح التحميل this.onccess = function () {} ؛ // تحديد الحدث الفاشل this.onfailure = function () {} ؛ } الدالة btnclick () {// إنشاء الكائن var jsloader = new jsloader () ؛ // تحديد معالج نجاح التحميل jsloader.onsuccess = function () {sayhello () ؛ } // تحديد معالج فشل التحميل jsloader.onfailure = function () {Alert ("فشل تحميل الملف!") ؛ } // ابدأ تحميل jsloader.load ("hello.js") ؛ } </script> </head> <body> <label> <input type = "pridt" name = "submit" onClick = "javaScript: btnclick ()" value = "loading javaScript file"> </sable> </body> </html>(2) إنشاء ملف Hello.js جديد ، بما في ذلك الرمز التالي:
// وظيفة مستند JavaScript Sealhhello () {Alert ("Hello World! تم تحميل ملف JavaScript بنجاح") ؛ } // javaScript documentFunction sealhello () {Alert ("Hello World! تم تحميل ملف JavaScript بنجاح") ؛ }