insertar - llamar funcion javascript html sin evento
Cargar dinámicamente JS dentro de JS (13)
Aquí hay un poco de lib para cargar dinámicamente archivos javascript y CSS:
https://github.com/todotresde/javascript-loader
Supongo que es útil cargar archivos css y js en orden y dinámicamente.
Soporte para ampliar para cargar cualquier lib que desee, y no solo el archivo principal, puede usarlo para cargar archivos personalizados.
ES DECIR:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/javascript-loader.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript">
$(function() {
registerLib("threejs", test);
function test(){
console.log(THREE);
}
registerLib("tinymce", draw);
function draw(){
tinymce.init({selector:''textarea''});
}
});
</script>
</head>
<body>
<textarea>Your content here.</textarea>
</body>
Esta pregunta ya tiene una respuesta aquí:
Tengo una página web dinámica donde necesito importar un archivo JS externo (bajo una condición IF ) dentro de otro archivo javascript.
Intenté buscar una solución viable pero no funcionó.
He intentado cargar un archivo JS en el DOM usando document.createElement() pero tampoco funcionó. Aparentemente, los Js se cargaron en el DOM pero no se pudo acceder al archivo JS actual.
La solución en jQuery también estará bien.
El método jQuery.getScript() es una abreviatura de la función Ajax (con el atributo dataType: $.ajax({ url: url, dataType: "script" }) )
Si desea que los scripts se puedan almacenar en caché, use RequireJS o siga el ejemplo de jQuery al extender el método jQuery.getScript similar al siguiente.
jQuery.cachedScript = function( url, options ) {
// Allow user to set any option except for dataType, cache, and url
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax( options );
};
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});
Referencia: jQuery.getScript () | Documentación API jQuery
Necesito hacer esto con frecuencia, así que uso esto:
var loadJS = function(url, implementationCode, location){
//url is URL of external file, implementationCode is the code
//to be called from the file, location is the location to
//insert the <script> element
var scriptTag = document.createElement(''script'');
scriptTag.src = url;
scriptTag.onload = implementationCode;
scriptTag.onreadystatechange = implementationCode;
location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS(''yourcode.js'', yourCodeToBeCalled, document.body);
Para obtener más información, consulte este sitio. ¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript? , que es la fuente de mi idea de función.
Necromaning.
Uso esto para cargar scripts dependientes;
funciona con IE8 + sin agregar ninguna dependencia en otra biblioteca como jQuery!
var cScriptLoader = (function ()
{
function cScriptLoader(files)
{
var _this = this;
this.log = function (t)
{
console.log("ScriptLoader: " + t);
};
this.withNoCache = function (filename)
{
if (filename.indexOf("?") === -1)
filename += "?no_cache=" + new Date().getTime();
else
filename += "&no_cache=" + new Date().getTime();
return filename;
};
this.loadStyle = function (filename)
{
// HTMLLinkElement
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = _this.withNoCache(filename);
_this.log(''Loading style '' + filename);
link.onload = function ()
{
_this.log(''Loaded style "'' + filename + ''".'');
};
link.onerror = function ()
{
_this.log(''Error loading style "'' + filename + ''".'');
};
_this.m_head.appendChild(link);
};
this.loadScript = function (i)
{
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = _this.withNoCache(_this.m_js_files[i]);
var loadNextScript = function ()
{
if (i + 1 < _this.m_js_files.length)
{
_this.loadScript(i + 1);
}
};
script.onload = function ()
{
_this.log(''Loaded script "'' + _this.m_js_files[i] + ''".'');
loadNextScript();
};
script.onerror = function ()
{
_this.log(''Error loading script "'' + _this.m_js_files[i] + ''".'');
loadNextScript();
};
_this.log(''Loading script "'' + _this.m_js_files[i] + ''".'');
_this.m_head.appendChild(script);
};
this.loadFiles = function ()
{
// this.log(this.m_css_files);
// this.log(this.m_js_files);
for (var i = 0; i < _this.m_css_files.length; ++i)
_this.loadStyle(_this.m_css_files[i]);
_this.loadScript(0);
};
this.m_js_files = [];
this.m_css_files = [];
this.m_head = document.getElementsByTagName("head")[0];
// this.m_head = document.head; // IE9+ only
function endsWith(str, suffix)
{
if (str === null || suffix === null)
return false;
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
for (var i = 0; i < files.length; ++i)
{
if (endsWith(files[i], ".css"))
{
this.m_css_files.push(files[i]);
}
else if (endsWith(files[i], ".js"))
{
this.m_js_files.push(files[i]);
}
else
this.log(''Error unknown filetype "'' + files[i] + ''".'');
}
}
return cScriptLoader;
})();
var ScriptLoader = new cScriptLoader(["foo.css", "Scripts/Script4.js", "foobar.css", "Scripts/Script1.js", "Scripts/Script2.js", "Scripts/Script3.js"]);
ScriptLoader.loadFiles();
Si está interesado en la versión typescript utilizada para crear esto:
class cScriptLoader {
private m_js_files: string[];
private m_css_files: string[];
private m_head:HTMLHeadElement;
private log = (t:any) =>
{
console.log("ScriptLoader: " + t);
}
constructor(files: string[]) {
this.m_js_files = [];
this.m_css_files = [];
this.m_head = document.getElementsByTagName("head")[0];
// this.m_head = document.head; // IE9+ only
function endsWith(str:string, suffix:string):boolean
{
if(str === null || suffix === null)
return false;
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
for(var i:number = 0; i < files.length; ++i)
{
if(endsWith(files[i], ".css"))
{
this.m_css_files.push(files[i]);
}
else if(endsWith(files[i], ".js"))
{
this.m_js_files.push(files[i]);
}
else
this.log(''Error unknown filetype "'' + files[i] +''".'');
}
}
public withNoCache = (filename:string):string =>
{
if(filename.indexOf("?") === -1)
filename += "?no_cache=" + new Date().getTime();
else
filename += "&no_cache=" + new Date().getTime();
return filename;
}
public loadStyle = (filename:string) =>
{
// HTMLLinkElement
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = this.withNoCache(filename);
this.log(''Loading style '' + filename);
link.onload = () =>
{
this.log(''Loaded style "'' + filename + ''".'');
};
link.onerror = () =>
{
this.log(''Error loading style "'' + filename + ''".'');
};
this.m_head.appendChild(link);
}
public loadScript = (i:number) =>
{
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = this.withNoCache(this.m_js_files[i]);
var loadNextScript = () =>
{
if (i + 1 < this.m_js_files.length)
{
this.loadScript(i + 1);
}
}
script.onload = () =>
{
this.log(''Loaded script "'' + this.m_js_files[i] + ''".'');
loadNextScript();
};
script.onerror = () =>
{
this.log(''Error loading script "'' + this.m_js_files[i] + ''".'');
loadNextScript();
};
this.log(''Loading script "'' + this.m_js_files[i] + ''".'');
this.m_head.appendChild(script);
}
public loadFiles = () =>
{
// this.log(this.m_css_files);
// this.log(this.m_js_files);
for(var i:number = 0; i < this.m_css_files.length; ++i)
this.loadStyle(this.m_css_files[i])
this.loadScript(0);
}
}
var ScriptLoader = new cScriptLoader(["foo.css", "Scripts/Script4.js", "foobar.css", "Scripts/Script1.js", "Scripts/Script2.js", "Scripts/Script3.js"]);
ScriptLoader.loadFiles();
Si es para cargar una lista dinámica de scripts, escriba los scripts en un atributo, como data-main, por ejemplo, <script src="scriptloader.js" data-main="file1.js,file2.js,file3.js,etc." ></script> <script src="scriptloader.js" data-main="file1.js,file2.js,file3.js,etc." ></script>
y hacer un element.getAttribute("data-main").split('','')
como
var target = document.currentScript || (function() {
var scripts = document.getElementsByTagName(''script'');
// Note: this is for IE as IE doesn''t support currentScript
// this does not work if you have deferred loading with async
// e.g. <script src="..." async="async" ></script>
// https://web.archive.org/web/20180618155601/https://www.w3schools.com/TAgs/att_script_async.asp
return scripts[scripts.length - 1];
})();
target.getAttribute("data-main").split('','')
para obtener la lista.
Para crear mi complemento necesitaba cargar secuencias de comandos y estilos externos dentro de un archivo JS, todos los cuales estaban predefinidos. Para lograr esto, hice lo siguiente:
this.loadRequiredFiles = function (callback) {
var scripts = [''xx.js'', ''yy.js''];
var styles = [''zz.css''];
var filesloaded = 0;
var filestoload = scripts.length + styles.length;
for (var i = 0; i < scripts.length; i++) {
log(''Loading script '' + scripts[i]);
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = scripts[i];
script.onload = function () {
log(''Loaded script'');
log(this);
filesloaded++; // (This means increment, i.e. add one)
finishLoad();
};
document.head.appendChild(script);
}
for (var i = 0; i < styles.length; i++) {
log(''Loading style '' + styles[i]);
var style = document.createElement(''link'');
style.rel = ''stylesheet'';
style.href = styles[i];
style.type = ''text/css'';
style.onload = function () {
log(''Loaded style'');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(style);
}
function finishLoad() {
if (filesloaded === filestoload) {
callback();
}
}
};
Más del script en contexto:
function myPlugin() {
var opts = {
verbose: false
}; ///< The options required to run this function
var self = this; ///< An alias to ''this'' in case we''re in jQuery ///< Constants required for this function to work
this.getOptions = function() {
return opts;
};
this.setOptions = function(options) {
for (var x in options) {
opts[x] = options[x];
}
};
/**
* @brief Load the required files for this plugin
* @param {Function} callback A callback function to run when all files have been loaded
*/
this.loadRequiredFiles = function (callback) {
var scripts = [''xx.js'', ''yy.js''];
var styles = [''zz.css''];
var filesloaded = 0;
var filestoload = scripts.length + styles.length;
for (var i = 0; i < scripts.length; i++) {
log(''Loading script '' + scripts[i]);
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = scripts[i];
script.onload = function () {
log(''Loaded script'');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(script);
}
for (var i = 0; i < styles.length; i++) {
log(''Loading style '' + styles[i]);
var style = document.createElement(''link'');
style.rel = ''stylesheet'';
style.href = styles[i];
style.type = ''text/css'';
style.onload = function () {
log(''Loaded style'');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(style);
}
function finishLoad() {
if (filesloaded === filestoload) {
callback();
}
}
};
/**
* @brief Enable user-controlled logging within this function
* @param {String} msg The message to log
* @param {Boolean} force True to log message even if user has set logging to false
*/
function log(msg, force) {
if (opts.verbose || force) {
console.log(msg);
}
}
/**
* @brief Initialise this function
*/
this.init = function() {
self.loadRequiredFiles(self.afterLoadRequiredFiles);
};
this.afterLoadRequiredFiles = function () {
// Do stuff
};
}
Puede cargar dinámicamente el js dentro de la página, no otro archivo js
tienes que usar el getScript para cargar el archivo js
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log(''Load was performed.'');
});
Puedes hacerlo usando JQuery:
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log(''Load was performed.'');
});
este enlace debería ayudar: getScript
Puedes usar el $.getScript() jQuery para hacerlo, pero si quieres una característica más completa, yepnope.js es tu elección. Admite la carga condicional de scripts y hojas de estilo y es fácil de usar.
Recomiendo el uso de requirejs con archivos de clase javascript de AMD
buen ejemplo de cómo usarlo aquí
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/
Si tiene muchos archivos con dependencias , use AMD / RequireJS. RequireJS
Supongo que en su solución solo para DOM hizo algo como:
var script = document.createElement(''script'');
script.src = something;
//do stuff with the script
En primer lugar, eso no funcionará porque la secuencia de comandos no se agrega al árbol de documentos, por lo que no se cargará. Además, incluso cuando lo hace, la ejecución de javascript continúa mientras se está cargando el otro script, por lo que su contenido no estará disponible hasta que el script esté completamente cargado.
Puede escuchar el evento de load del script y hacer las cosas con los resultados como lo haría. Asi que:
var script = document.createElement(''script'');
script.onload = function () {
//do stuff with the script
};
script.src = something;
document.head.appendChild(script); //or something of the likes
jQuery tiene getScript :
Descripción : cargue un archivo JavaScript desde el servidor mediante una solicitud GET HTTP y luego ejecútelo.
$.getScript() jQuery a veces tiene errores, así que uso mi propia implementación como:
jQuery.loadScript = function (url, callback) {
jQuery.ajax({
url: url,
dataType: ''script'',
success: callback,
async: true
});
}
y utilízalo como:
if (typeof someObject == ''undefined'') $.loadScript(''url_to_someScript.js'', function(){
//Stuff to do after someScript has loaded
});