تقدم هذه المقالة بشكل أساسي طريقتين لتحميل ملفات JavaScript ديناميكيًا. يمكن للأصدقاء المهتمين الرجوع إليها.
الأول هو استخدام طريقة AJAX لتحميل رمز ملف البرنامج النصي من الخلفية إلى المقدمة ، ثم تنفيذ الرمز للمحتوى المحمّل من خلال eval (). النوع الثاني هو إنشاء علامة نصية ، وتكوين سمة SRC الخاصة به ، وتحميل JS عن طريق إدخال علامة البرنامج النصي في رأس الصفحة ، وهو ما يعادل كتابة <script src = "..."> </script> في الرأس ، ولكن يتم إنشاء علامة البرنامج النصي هذه باستخدام JS SRC.
على سبيل المثال ، إذا كنا نريد تحميل callbakc.js ديناميكيًا ، نحتاج إلى علامة نصية:
الرمز كما يلي: انسخ الرمز كما يلي: <script type = "text/javaScript" src = "call.js"> </script>
الرمز التالي هو كيفية إنشاء هذه العلامة من خلال JS (وإضافتها إلى الرأس):
الرمز كما يلي:
var head = document.getElementSbyTagName ('head') [0] ؛ var script = document.createElement ('script') ؛ script.type = 'text/javaScript' ؛ script.src = 'call.js' ؛ head.appendchild (script) ؛عند تحميل call.js ، نحتاج إلى استدعاء الأساليب فيه. ومع ذلك ، بعد header.appendchild (script) لا يمكننا الاتصال بـ JS على الفور. نظرًا لأن المتصفح يقوم بتحميل هذا JS بشكل غير متزامن ، فإننا لا نعرف متى سيتم تحميله. ومع ذلك ، يمكننا الحكم على ما إذا كان Helper.js يتم تحميله من خلال الاستماع إلى الأحداث. (افترض أن هناك طريقة رد اتصال في Call.js) الرمز كما يلي:
var head = document.getElementSbyTagName ('head') [0] ؛ var script = document.createElement ('script') ؛ script.type = 'text/javaScript' ؛ script.onReadyStateChange = function () {if (this.readyState == 'complete') callback () ؛ } script.onload = function () {callback () ؛ } script.src = 'helper.js' ؛ head.appendchild (script) ؛لقد قمت بإعداد 2 وظائف الاستماع للحدث نظرًا لاستخدام onReadyStateChange في IE ، بينما يتم دعم Onload بواسطة Gecko و WebKit Browser and Operator. في الواقع ، هذا. من الناحية النظرية ، فإن تغييرات الدولة هي كما يلي:
1.Initialized
2. تحميل
3. تم تحميله
4. نشط
5.PLETE
ولكن سيتم تخطي بعض الولايات. وفقًا للتجربة في IE7 ، يمكنك فقط الحصول على واحدة من تحميلها وإكمالها ، ولا يمكن أن تظهر. قد يكون السبب في أنك تحدد ما إذا كانت القراءة من ذاكرة التخزين المؤقت تؤثر على التغيير في الحالة أو أسباب أخرى. من الأفضل تغيير حالة الحكم إلى هذا. this.readyState == "كاملة"
بالإشارة إلى تنفيذ jQuery ، قمنا بتنفيذها أخيرًا على النحو التالي: الرمز كما يلي:
var head = document.getElementSbyTagName ('head') [0] ؛ var script = document.createElement ('script') ؛ script.type = 'text/javaScript' ؛ script.onload = script.onReadyStateChange = function () {if (! this.readyState || this.readyState === "loaded" || this.readyState === "COMPTURE") {help () ؛ // التعامل مع تسرب الذاكرة في ie script.onload = script.onReadyStateChange = null ؛ }} ؛ script.src = 'helper.js' ؛ head.appendchild (script) ؛هناك موقف بسيط آخر يمكنك كتابة المكالمة للمساعدة () في نهاية Helper.js ، حتى تتمكن من التأكد من أنه يمكن استدعاء Help () تلقائيًا بعد تحميل Helper.js. بالطبع ، في النهاية ، هذا غير مناسب لتطبيقك.
ملاحظة أيضا:
1. نظرًا لأن علامة البرنامج النصي يمكن أن تصل إلى الموارد عبر المجالات ، يمكن لهذه الطريقة محاكاة AJAX وحل مشكلة الوصول إلى المجال المتقاطع AJAX.
2. إذا كان رمز HTML الذي تم إرجاعه باستخدام AJAX يحتوي على البرنامج النصي ، فإن إدخال البرنامج النصي في HTML مباشرة في DOM مع InnerHTML لا يمكن جعل البرنامج النصي في عمل HTML. ألقيت نظرة فادحة على الكود الأصلي لـ jQuery (). HTML (HTML). تقوم JQuery أيضًا بتوصيف المعلمات التي تم تمريرها ، ويقوم بتعيين رمز البرنامج النصي فيه ، ويقوم بإنشاء علامات البرنامج النصي ديناميكيًا. تتم إضافة طريقة HTML المستخدمة بواسطة jQuery إلى DOM HTML إذا كانت تحتوي على البرنامج النصي ، ويمكن تنفيذها. يحب:
نسخة الكود كما يلي: jQuery ("#content"). html ("<script> Alert ('aa') ؛ <// script>") ؛
ما سبق هو طريقة تحميل ملفات JavaScript ديناميكيًا. آمل أن يكون ذلك مفيدًا لتعلم الجميع.