javascript شرح تضمين ملف جافا سكريبت في وحدة تحكم Chrome



جافا سكريبت تحميل (5)

هل تستخدم بعض إطار AJAX؟ باستخدام jQuery سيكون:

$.getScript('script.js');

إذا كنت لا تستخدم أي إطار ، فراجع الإجابة عن طريق Harmen.

(ربما لا يستحق استخدام jQuery لمجرد القيام بهذا الشيء البسيط ( أو ربما هو ) ولكن إذا كان لديك بالفعل تحميل ثم يمكنك استخدامه. لقد رأيت مواقع الويب التي تحتوي على jQuery محملة على سبيل المثال مع Bootstrap ولكن لا يزال استخدام واجهة برمجة تطبيقات DOM مباشرة بطريقة ليست محمولة دائمًا ، بدلاً من استخدام jQuery الذي تم تحميله بالفعل لذلك ، والعديد من الأشخاص ليسوا على دراية بحقيقة أن getElementById() لا يعمل باستمرار على جميع المتصفحات - انظر هذه الإجابة للتفاصيل.)

تحديث:

لقد مرت سنوات منذ أن كتبت هذه الإجابة وأعتقد أنه من الجدير بالذكر هنا اليوم أنه يمكنك استخدام:

لتحميل البرامج النصية ديناميكيا. قد تكون ذات صلة بالناس الذين يقرؤون هذا السؤال.

انظر أيضًا: The Fluent 2014 الحديث عن طريق غي بيدفورد: تدفقات العمل العملية لوحدات ES6 .

هل هناك طريقة أبسط (أصلية ربما؟) لتضمين ملف نصي خارجي في متصفح Google Chrome؟

حاليا أفعل ذلك على النحو التالي:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

Answer #1
var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName('head')[0];
hhead.insertBefore(el, hhead.firstChild);

Answer #2

في chrome ، قد يكون أفضل خيار هو علامة التبويب Snippets ضمن Sources in the Developer Tools.

سيسمح لك بكتابة التعليمات البرمجية وتشغيلها ، على سبيل المثال ، في: صفحة فارغة.

مزيد من المعلومات هنا: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en


Answer #3

appendChild() هي طريقة أكثر محلية:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Answer #4

كمتابعة لإجابة @ maciej-bukowski أعلاه ^^^ ، في المتصفحات الحديثة حتى الآن (ربيع 2017) التي تدعم async / في انتظار يمكنك تحميلها على النحو التالي. في هذا المثال ، يتم تحميل مكتبة html2canvas الخاصة بالحمل:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

إذا قمت بتشغيل القصاصة ثم افتح وحدة تحكم المستعرض الخاص بك يجب أن تشاهد الدالة html2canvas () تم تعريفها الآن.





include