بشكل حيوي تحميل ملف جافا سكريبت
https://stackoverflow.com/questions/21294
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
كيف يمكن بشكل حيوي تحميل جافا سكريبت الملف ؟ هذا سوف يمكن استخدامها لتنفيذ وحدة أو عنصر عندما 'تهيئة' عنصر حيوي تحميل كل حاجة جافا سكريبت مكتبة البرامج النصية على الطلب.
العميل الذي يستخدم عنصر لا يشترط تحميل جميع مكتبة سكربت ملفات (يدويا إدراج <script> الكلمات في صفحة ويب) أن تنفيذ هذا العنصر فقط 'الرئيسية' مكونات ملف البرنامج النصي.
كيف السائدة مكتبات جافا سكريبت إنجاز هذا (النموذج, مسج, إلخ) ؟ هل هذه الأدوات دمج عدة ملفات جافا سكريبت في واحد القابلة 'بناء' نسخة من السيناريو الملف ؟ أو أنها لا تفعل أي ديناميكية التحميل من التبعية المكتبة النصية ؟
إضافة إلى هذا السؤال: هل هناك طريقة للتعامل مع هذا الحدث بعد حيوي وشملت ملف جافا سكريبت يتم تحميلها ؟ النموذج لديه document.observe بالنسبة الوثيقة على نطاق الأحداث.على سبيل المثال:
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
ما هي المتاحة أحداث السيناريو عنصر ؟
المحلول
قد تكتب ديناميكية علامات البرنامج النصي (باستخدام النموذج):
new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});
المشكلة هنا أننا لا نعرف عندما الخارجية ملف نصي يتم تحميلها بالكامل.
ونحن في كثير من الأحيان تريد لدينا يعتمد الكود في السطر التالي ومن أحب أن أكتب شيئا مثل:
if (iNeedSomeMore) {
Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod();
myFancyMethod(); // cool, no need for callbacks!
}
هناك طريقة ذكية لحقن النصي تبعيات دون رد.عليك ببساطة سحب النصي عن طريق متزامن طلب اياكس و eval السيناريو على المستوى العالمي.
إذا كنت تستخدم نموذج البرنامج النصي.طريقة الحمل تبدو مثل هذا:
var Script = {
_loadedScripts: [],
include: function(script) {
// include script only once
if (this._loadedScripts.include(script)) {
return false;
}
// request file synchronous
var code = new Ajax.Request(script, {
asynchronous: false,
method: "GET",
evalJS: false,
evalJSON: false
}).transport.responseText;
// eval code on global level
if (Prototype.Browser.IE) {
window.execScript(code);
} else if (Prototype.Browser.WebKit) {
$$("head").first().insert(Object.extend(
new Element("script", {
type: "text/javascript"
}), {
text: code
}
));
} else {
window.eval(code);
}
// remember included script
this._loadedScripts.push(script);
}
};
نصائح أخرى
لا يوجد استيراد / وتشمل / يشترط في جافا سكريبت ، ولكن هناك اثنين من الطرق الرئيسية لتحقيق ما تريد:
1 - يمكنك تحميله مع اياكس الاتصال ثم استخدم eval.
هذه هي الطريقة الأكثر مباشرة لكنه يقتصر على المجال الخاص بك بسبب جافا سكريبت إعدادات الأمان باستخدام eval هو فتح باب الخلل الخارقة.
2 - إضافة علامة النصي مع البرنامج النصي URL HTML.
بالتأكيد أفضل طريقة للذهاب.يمكنك تحميل البرنامج النصي حتى من الأجانب خادم انها نظيفة كما يمكنك استخدام المتصفح محلل تقييم البرمجية.يمكنك وضع علامة في رأس صفحة ويب ، أو في الجزء السفلي من الجسم.
كل من هذه الحلول التي نوقشت هو موضح هنا.
الآن هناك قضية كبيرة يجب أن تعرف عن.تفعل هذا يعني أنك بعد تحميل التعليمات البرمجية.متصفحات الويب الحديثة سيتم تحميل الملف والحفاظ على تنفيذ الحالية الخاصة بك النصي لأنهم تحميل كل شيء بشكل غير متزامن لتحسين الأداء.
هذا يعني أنه إذا كنت تستخدم هذه الحيل مباشرة, أنك لن تكون قادرا على استخدام الخاص بك تحميل حديثا رمز السطر التالي بعد ذلك يتم تحميل, لأنه سوف يكون لا يزال تحميل.
E. G :my_lovely_script.js يحتوي على MySuperObject
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
ثم يمكنك إعادة تحميل الصفحة ضرب F5.و يعمل!مربكة...
ذلك ما يجب القيام به حيال ذلك ؟
حسنا, يمكنك استخدام هاك يقترح المؤلف في الرابط الذي أعطيتك إياهفي ملخص, الناس في عجلة من امرنا ، انه يستخدم ar الحدث لتشغيل وظيفة رد الاتصال عندما يتم تحميل البرنامج النصي.حتى تتمكن من وضع كافة التعليمات البرمجية باستخدام جهاز التحكم عن بعد مكتبة في وظيفة رد الاتصال.E. G :
function loadScript(url, callback)
{
// adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// then bind the event to the callback function
// there are several events for cross browser compatibility
script.onreadystatechange = callback;
script.onload = callback;
// fire the loading
head.appendChild(script);
}
ثم يمكنك كتابة التعليمات البرمجية التي تريد استخدامها بعد أن يتم تحميل البرنامج النصي في وظيفة لامدا :
var myPrettyCode = function() {
// here, do what ever you want
};
ثم يمكنك تشغيل جميع ذلك :
loadScript("my_lovely_script.js", myPrettyCode);
حسنا, لقد حصلت عليه.ولكن هذا الألم لكتابة كل هذه الأشياء.
حسنا, في هذه الحالة يمكنك استخدام كما هو الحال دائما حرة رائعة إطار مسج التي تسمح لك أن تفعل نفس الشيء في سطر واحد :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});
أنا استخدم أقل تعقيدا نسخة مؤخرا مع مسج:
<script src="scripts/jquery.js"></script>
<script>
var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"];
var $head = $("head");
for (var i = 0; i < js.length; i++) {
$head.append("<script src=\"" + js[i] + "\"></scr" + "ipt>");
}
</script>
عملت كبيرة في كل متصفح اختبرته في:IE6/7, فايرفوكس, سفاري, اوبرا.
تحديث: مسج أقل الإصدار:
<script>
var js = ["scripts/jquery.dimensions.js", "scripts/shadedborder.js", "scripts/jqmodal.js", "scripts/main.js"];
for (var i = 0, l = js.length; i < l; i++) {
document.getElementsByTagName("head")[0].innerHTML += ("<script src=\"" + js[i] + "\"></scr" + "ipt>");
}
</script>
فعلت نفس الشيء الذي فعلته آدم ، ولكن مع تعديل طفيف للتأكد من كنت إلحاق الرأس الوسم لانجاز هذه المهمة.أنا ببساطة خلق تشمل وظيفة (رمز أدناه) إلى التعامل مع كل سيناريو و ملفات css.
هذه الوظيفة أيضا الشيكات للتأكد من أن نصي أو ملف CSS لم يكن قد تم تحميلها بشكل حيوي.فإنه لا تحقق اليد ترميز القيم و قد يكون هناك طريقة أفضل للقيام بذلك ، ولكن كما خدم الغرض.
function include( url, type ){
// First make sure it hasn't been loaded by something else.
if( Array.contains( includedFile, url ) )
return;
// Determine the MIME-type
var jsExpr = new RegExp( "js$", "i" );
var cssExpr = new RegExp( "css$", "i" );
if( type == null )
if( jsExpr.test( url ) )
type = 'text/javascript';
else if( cssExpr.test( url ) )
type = 'text/css';
// Create the appropriate element.
var tag = null;
switch( type ){
case 'text/javascript' :
tag = document.createElement( 'script' );
tag.type = type;
tag.src = url;
break;
case 'text/css' :
tag = document.createElement( 'link' );
tag.rel = 'stylesheet';
tag.type = type;
tag.href = url;
break;
}
// Insert it to the <head> and the array to ensure it is not
// loaded again.
document.getElementsByTagName("head")[0].appendChild( tag );
Array.add( includedFile, url );
}
آخر رهيبة الإجابة
$.getScript("my_lovely_script.js", function(){
alert("Script loaded and executed.");
// here you can use anything you defined in the loaded script
});
هنا بعض التعليمة البرمجية الموجودة في المثال لقد وجدت...هل من أحد لديه طريقة أفضل ؟
function include(url)
{
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", url);
var nodes = document.getElementsByTagName("*");
var node = nodes[nodes.length -1].parentNode;
node.appendChild(s);
}
إذا كان لديك مسج تحميلها بالفعل, يجب عليك استخدام $.getScript.
هذا له ميزة على غيرها من الإجابات هنا في أن كنت قد بنيت في وظيفة رد الاتصال (ضمان يتم تحميل البرنامج النصي قبل معال تشغيل التعليمات البرمجية) و يمكنك التحكم في التخزين المؤقت.
هل من أحد لديه طريقة أفضل ؟
أعتقد فقط إضافة النص إلى الجسم سيكون من الأسهل ثم إضافته إلى العقدة الأخيرة على الصفحة.كيف حول هذا:
function include(url) {
var s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", url);
document.body.appendChild(s);
}
لقد استعملت بعد حل آخر وجدته على النت ...هذا هو واحد تحت creativecommons و الشيكات إذا كان المصدر أدرج قبل استدعاء الدالة ...
يمكنك العثور على الملف هنا: include.js
/** include - including .js files from JS - bfults@gmail.com - 2005-02-09
** Code licensed under Creative Commons Attribution-ShareAlike License
** http://creativecommons.org/licenses/by-sa/2.0/
**/
var hIncludes = null;
function include(sURI)
{
if (document.getElementsByTagName)
{
if (!hIncludes)
{
hIncludes = {};
var cScripts = document.getElementsByTagName("script");
for (var i=0,len=cScripts.length; i < len; i++)
if (cScripts[i].src) hIncludes[cScripts[i].src] = true;
}
if (!hIncludes[sURI])
{
var oNew = document.createElement("script");
oNew.type = "text/javascript";
oNew.src = sURI;
hIncludes[sURI]=true;
document.getElementsByTagName("head")[0].appendChild(oNew);
}
}
}
فقط اكتشفت ميزة كبيرة في YUI 3 (في وقت كتابة هذا التقرير متاح في الافراج عن معاينة).يمكنك بسهولة إدراج التبعيات يوي المكتبات و "الخارجية" وحدات (ما كنت أبحث عنه) دون الكثير من التعليمات البرمجية: YUI محمل.
كما يجيب عن سؤالك الثاني بخصوص الوظيفة التي تسمى في أقرب وقت الخارجية يتم تحميل وحدة.
على سبيل المثال:
YUI({
modules: {
'simple': {
fullpath: "http://example.com/public/js/simple.js"
},
'complicated': {
fullpath: "http://example.com/public/js/complicated.js"
requires: ['simple'] // <-- dependency to 'simple' module
}
},
timeout: 10000
}).use('complicated', function(Y, result) {
// called as soon as 'complicated' is loaded
if (!result.success) {
// loading failed, or timeout
handleError(result.msg);
} else {
// call a function that needs 'complicated'
doSomethingComplicated(...);
}
});
عملت تماما بالنسبة لي و له ميزة إدارة التبعيات.الرجوع إلى YUI الاستقلال على سبيل المثال مع يوي 2 التقويم.
إذا كنت ترغب في المزامنة تحميل البرنامج النصي, تحتاج إلى إضافة البرنامج النصي النص مباشرة إلى HTML HEAD.مضيفا أنها سوف تؤدي إلى المتزامن تحميل.لتحميل البرنامج النصي النص من ملف خارجي بشكل متزامن ، استخدام XHR.أدناه عينة سريعة (فمن باستخدام أجزاء من إجابات أخرى في هذه وغيرها من الوظائف):
/*sample requires an additional method for array prototype:*/
if (Array.prototype.contains === undefined) {
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) { if (this[i] === obj) return true; }
return false;
};
};
/*define object that will wrap our logic*/
var ScriptLoader = {
LoadedFiles: [],
LoadFile: function (url) {
var self = this;
if (this.LoadedFiles.contains(url)) return;
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
self.LoadedFiles.push(url);
self.AddScript(xhr.responseText);
} else {
if (console) console.error(xhr.statusText);
}
}
};
xhr.open("GET", url, false);/*last parameter defines if call is async or not*/
xhr.send(null);
},
AddScript: function (code) {
var oNew = document.createElement("script");
oNew.type = "text/javascript";
oNew.textContent = code;
document.getElementsByTagName("head")[0].appendChild(oNew);
}
};
/*Load script file. ScriptLoader will check if you try to load a file that has already been loaded (this check might be better, but I'm lazy).*/
ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js");
ScriptLoader.LoadFile("Scripts/jquery-2.0.1.min.js");
/*this will be executed right after upper lines. It requires jquery to execute. It requires a HTML input with id "tb1"*/
$(function () { alert($('#tb1').val()); });
هذه التقنية التي نستخدمها في العمل هو طلب ملف جافا سكريبت باستخدام طلب اياكس ثم eval() عودة.إذا كنت تستخدم النموذج مكتبة أنها تدعم هذه الوظيفة في اياكس.طلب الاتصال.
مسج حل هذا بالنسبة لي مع .إلحاق() وظيفة - يستخدم هذا لتحميل كامل حزمة واجهة المستخدم مسج
/*
* FILENAME : project.library.js
* USAGE : loads any javascript library
*/
var dirPath = "../js/";
var library = ["functions.js","swfobject.js","jquery.jeditable.mini.js","jquery-ui-1.8.8.custom.min.js","ui/jquery.ui.core.min.js","ui/jquery.ui.widget.min.js","ui/jquery.ui.position.min.js","ui/jquery.ui.button.min.js","ui/jquery.ui.mouse.min.js","ui/jquery.ui.dialog.min.js","ui/jquery.effects.core.min.js","ui/jquery.effects.blind.min.js","ui/jquery.effects.fade.min.js","ui/jquery.effects.slide.min.js","ui/jquery.effects.transfer.min.js"];
for(var script in library){
$('head').append('<script type="text/javascript" src="' + dirPath + library[script] + '"></script>');
}
استخدام - في رأس html/php/etc بعد استيراد jquery.js يمكنك فقط تضمين هذا الملف مثل ذلك الحمل في مجملها من المكتبة الخاصة بك إلحاق رأسه...
<script type="text/javascript" src="project.library.js"></script>
الحفاظ على لطيفة, قصيرة, بسيطة ، للصيانة!:]
// 3rd party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
FULL_PATH + 'plugins/script.js' // Script example
FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library
FULL_PATH + 'plugins/crypto-js/hmac-sha1.js', // CryptoJS
FULL_PATH + 'plugins/crypto-js/enc-base64-min.js' // CryptoJS
];
function load(url)
{
var ajax = new XMLHttpRequest();
ajax.open('GET', url, false);
ajax.onreadystatechange = function ()
{
var script = ajax.response || ajax.responseText;
if (ajax.readyState === 4)
{
switch(ajax.status)
{
case 200:
eval.apply( window, [script] );
console.log("library loaded: ", url);
break;
default:
console.log("ERROR: library not loaded: ", url);
}
}
};
ajax.send(null);
}
// initialize a single load
load('plugins/script.js');
// initialize a full load of scripts
if (s.length > 0)
{
for (i = 0; i < s.length; i++)
{
load(s[i]);
}
}
هذا الرمز هو مجرد قصيرة وظيفية سبيل المثال أن يمكن أن تتطلب ميزة إضافية وظائف الدعم الكامل لأي (أو المقدمة) منصة.
هناك مقترح جديد ECMA القياسية يسمى ديناميكية الواردات, مؤخرا إدراج كروم وسفاري.
const moduleSpecifier = './dir/someModule.js';
import(moduleSpecifier)
.then(someModule => someModule.foo()); // executes foo method in someModule
هناك البرامج النصية التي تم تصميمها خصيصا لهذا الغرض.
yepnope.js بنيت في Modernizr ، lab.js هو أكثر الأمثل (ولكن أقل الاستعمال الإصدار.
أنا لا أوصى به هذا من خلال مكتبة كبيرة مثل مسج أو النموذج - لأن واحدة من الفوائد الرئيسية من النص المحمل هو القدرة على تحميل البرامج النصية في وقت مبكر - يجب أن لا تضطر إلى الانتظار حتى مسج & كل ما تبذلونه من عناصر dom الحمل قبل تشغيل تحقق لمعرفة ما إذا كنت ترغب بشكل حيوي تحميل البرنامج النصي.
كتبت بسيطة وحدة automatizes وظيفة استيراد/بما في ذلك وحدة البرامج النصية في جافا سكريبت.محاولة إعطائها يرجى تجنيب بعض ردود الفعل!:) لشرح مفصل من قانون الرجوع إلى هذا بلوق وظيفة: http://stamat.wordpress.com/2013/04/12/javascript-require-import-include-modules/
var _rmod = _rmod || {}; //require module namespace
_rmod.on_ready_fn_stack = [];
_rmod.libpath = '';
_rmod.imported = {};
_rmod.loading = {
scripts: {},
length: 0
};
_rmod.findScriptPath = function(script_name) {
var script_elems = document.getElementsByTagName('script');
for (var i = 0; i < script_elems.length; i++) {
if (script_elems[i].src.endsWith(script_name)) {
var href = window.location.href;
href = href.substring(0, href.lastIndexOf('/'));
var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length);
return url.substring(href.length+1, url.length);
}
}
return '';
};
_rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark the root directory of your library, any library
_rmod.injectScript = function(script_name, uri, callback, prepare) {
if(!prepare)
prepare(script_name, uri);
var script_elem = document.createElement('script');
script_elem.type = 'text/javascript';
script_elem.title = script_name;
script_elem.src = uri;
script_elem.async = true;
script_elem.defer = false;
if(!callback)
script_elem.onload = function() {
callback(script_name, uri);
};
document.getElementsByTagName('head')[0].appendChild(script_elem);
};
_rmod.requirePrepare = function(script_name, uri) {
_rmod.loading.scripts[script_name] = uri;
_rmod.loading.length++;
};
_rmod.requireCallback = function(script_name, uri) {
_rmod.loading.length--;
delete _rmod.loading.scripts[script_name];
_rmod.imported[script_name] = uri;
if(_rmod.loading.length == 0)
_rmod.onReady();
};
_rmod.onReady = function() {
if (!_rmod.LOADED) {
for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){
_rmod.on_ready_fn_stack[i]();
});
_rmod.LOADED = true;
}
};
//you can rename based on your liking. I chose require, but it can be called include or anything else that is easy for you to remember or write, except import because it is reserved for future use.
var require = function(script_name) {
var np = script_name.split('.');
if (np[np.length-1] === '*') {
np.pop();
np.push('_all');
}
script_name = np.join('.');
var uri = _rmod.libpath + np.join('/')+'.js';
if (!_rmod.loading.scripts.hasOwnProperty(script_name)
&& !_rmod.imported.hasOwnProperty(script_name)) {
_rmod.injectScript(script_name, uri,
_rmod.requireCallback,
_rmod.requirePrepare);
}
};
var ready = function(fn) {
_rmod.on_ready_fn_stack.push(fn);
};
// ----- USAGE -----
require('ivar.util.array');
require('ivar.util.string');
require('ivar.net.*');
ready(function(){
//do something when required scripts are loaded
});
أنا فقدت في جميع هذه العينات ولكن اليوم أنا في حاجة إلى تحميل خارجي .شبيبة من الرئيسية .js و أنا فعلت هذا:
document.write("<script src='https://www.google.com/recaptcha/api.js'></script>");
هنا هو واحد بسيط مع رد و أي دعم:
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function () {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function () {
//jQuery loaded
console.log('jquery loaded');
});
هنا مثال بسيط عن وظيفة لتحميل ملفات JS.النقاط ذات الصلة:
- أنت لا تحتاج إلى مسج, لذلك يمكنك استخدام هذا في البداية أن الحمل أيضا jQuery.js الملف
- فمن المتزامن مع الاستدعاء
- فإنه يضمن تحميله مرة واحدة فقط ، كما أنها تحافظ ضميمة مع سجل حملت عناوين url ، وبالتالي تجنب استخدام الشبكة
- خلافا مسج
$.ajaxأو$.getScriptيمكنك استخدام nonces ، وبالتالي حل القضايا مع CSPunsafe-inline.فقط استخدام الخاصيةscript.nonce
var getScriptOnce = function() {
var scriptArray = []; //array of urls (closure)
//function to defer loading of script
return function (url, callback){
//the array doesn't have such url
if (scriptArray.indexOf(url) === -1){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
if (typeof callback === 'function') {
callback();
}
script.onload = script.onreadystatechange = null;
head.removeChild(script);
scriptArray.push(url);
}
};
head.appendChild(script);
}
};
}();
الآن يمكنك استخدامه ببساطة عن طريق
getScriptOnce("url_of_your_JS_file.js");
سخيف بطانة واحدة, بالنسبة لأولئك الذين يعتقدون أن تحميل مكتبة js يجب أن لا تأخذ أكثر من سطر واحد من التعليمات البرمجية :P
await new Promise((resolve, reject) => {let js = document.createElement("script"); js.src="mylibrary.js"; js.onload=resolve; js.onerror=reject; document.body.appendChild(js)});
من الواضح إذا كان البرنامج النصي الذي تريد استيراد وحدة نمطية, يمكنك استخدام import(...) وظيفة.
جميع مكتبات جافا سكريبت مثل jscript, النموذج, YUI يدعم تحميل ملفات البرامج النصية.على سبيل المثال ، في YUI, بعد تحميل جوهر يمكنك القيام بما يلي لتحميل التقويم التحكم
var loader = new YAHOO.util.YUILoader({
require: ['calendar'], // what components?
base: '../../build/',//where do they live?
//filter: "DEBUG", //use debug versions (or apply some
//some other filter?
//loadOptional: true, //load all optional dependencies?
//onSuccess is the function that YUI Loader
//should call when all components are successfully loaded.
onSuccess: function() {
//Once the YUI Calendar Control and dependencies are on
//the page, we'll verify that our target container is
//available in the DOM and then instantiate a default
//calendar into it:
YAHOO.util.Event.onAvailable("calendar_container", function() {
var myCal = new YAHOO.widget.Calendar("mycal_id", "calendar_container");
myCal.render();
})
},
// should a failure occur, the onFailure function will be executed
onFailure: function(o) {
alert("error: " + YAHOO.lang.dump(o));
}
});
// Calculate the dependency and insert the required scripts and css resources
// into the document
loader.insert();
أعرف أن جوابي هو متأخر عن هذا السؤال ، ولكن هنا هو مقال رائع في www.html5rocks.com - الغوص في المياه العكرة من تحميل البرنامج النصي .
في هذا المقال وخلص إلى أنه في ما يخص دعم متصفح, أفضل طريقة حيوي تحميل ملف جافا سكريبت دون عرقلة تقديم محتوى على النحو التالي:
باعتبار أنك أربع مخطوطات اسمه script1.js, script2.js, script3.js, script4.js ثم يمكنك أن تفعل ذلك مع تطبيق async = false:
[
'script1.js',
'script2.js',
'script3.js',
'script4.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
الآن ، المواصفات تقول:تحميل معا التنفيذ في أقرب وقت كل تحميل.
فايرفوكس < 3.6, أوبرا يقول: ليس لدي أي فكرة ما هذا "التزامن" الشيء, ولكن كان تنفيذ البرامج النصية وأضاف عبر JS في الأمر أنهم المضافة.
سفاري 5.0 يقول: أنا أفهم "المتزامن" ، ولكن لا أفهم تعيين إلى "false" مع شبيبة.سوف تنفيذ البرامج النصية الخاصة بك في أقرب وقت لأنها الأراضي في كل ما أمر.
أي < 10 يقول: أي فكرة حول "المتزامن" ، ولكن هناك حلا باستخدام "onreadystatechange".
شيء آخر يقول: أنا صديقك, ونحن في طريقنا للقيام بذلك من قبل الكتاب.
الآن, الرمز الكامل مع IE < 10 الحل:
var scripts = [
'script1.js',
'script2.js',
'script3.js',
'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && pendingScripts[0].readyState == 'loaded') {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we’ll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
بعض الحيل و تصغير الحجم في وقت لاحق انه 362 بايت
!function(e,t,r){function n(){for(;d[0]&&"loaded"==d[0][f];)c=d.shift(),c[o]=!i.parentNode.insertBefore(c,i)}for(var s,a,c,d=[],i=e.scripts[0],o="onreadystatechange",f="readyState";s=r.shift();)a=e.createElement(t),"async"in i?(a.async=!1,e.head.appendChild(a)):i[f]?(d.push(a),a[o]=n):e.write("<"+t+' src="'+s+'" defer></'+t+">"),a.src=s}(document,"script",[
"//other-domain.com/1.js",
"2.js"
])
شيء من هذا القبيل...
<script>
$(document).ready(function() {
$('body').append('<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=getCurrentPickupLocation" async defer><\/script>');
});
</script>
