2012-07-03 32 views
7

Necesito llamar a una función en un archivo externo ".js" de otro archivo ".js", sin hacer referencia al archivo externo en la etiqueta <head>.¿Llamar a una función en un archivo Javascript desde otro archivo Javascript?

Sé que es posible añadir dinámicamente un archivo externo ".js" a la que permite el acceso a ese archivo, puedo hacer que al igual que ...

var AppFile = "test/testApp_1.js"; 
var NewScript=document.createElement('script'); 
var headID = document.getElementsByTagName("head")[0]; 
NewScript.src = AppFile; 
headID.appendChild(NewScript); 

Sin embargo ...

esto es inútil para mí como los archivos externos deben ser archivos independientes que se ejecutan los procedimientos de puesta en marcha en ...

$(document).ready(function() 
{...} 

por lo que añadir el archivo completo de forma dinámica ha afectar a un indeseado. Además, no puedo prerreferenciar el archivo externo en la etiqueta <head> ya que debe ser dinámico. Por lo tanto, este archivo externo "test/testApp_1.js" contiene una función que devuelve una variable de cadena ...

function setAppLogo(){ 

var LogoFile = "test/TestApp_1_Logo.png"; 

return LogoFile; 
}  

Necesito acceso a esta función ya sea, o podría almacenar la cadena como una var global en el archivo externo ... De cualquier manera está bien, solo necesito acceder al valor en LogoFile sin cargar todo el archivo externo.

Esta me ha dejado perplejo durante unas horas, por lo que cualquier idea sería muy apreciada.

+0

¿Por qué no puede agregar dinámicamente el ''? domready no se disparará hasta que se carguen todos los JS, CSS y HTML ... – Rudie

+0

porque añadiendo dinámicamente el encabezado, termino ejecutando código que no es deseado aquí. Solo necesito un valor de variable de este archivo, no el archivo completo. – user1005240

+0

No puede cargar parte del archivo ... Puede cargarlo con XHR y luego 'eval()' el resultado ... Pero no debería. – Rudie

Respuesta

0

Desea cargar el archivo una vez que jQuery lo haya cargado usando ajax, y luego ejecutar el script relacionado en la exitosa función ajax.

función getScript de Ver jQuery: http://api.jquery.com/jQuery.getScript/

$(document).ready(function(){ 
$.getScript("http://domain.com/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.'); 
    //run your second script executable code here 
}); 
}); 
+2

El OP dijo que "agregar el archivo completo de forma dinámica tiene un efecto no deseado", esto es exactamente lo mismo que agregar el script al encabezado. – jbabey

+0

sí, este código ejecuta el archivo completo que tiene efectos no deseados aquí, realmente lo que necesito es poder sumergirme en este archivo y ejecutar solo la función que necesito, algo así como ... 'myFile.theFunctionINeed();' u obtener el valor de una variable dentro del archivo, es decir, 'myFile.globalVar_1' – user1005240

0

Es posible cargar todo el guión a través XHR (por ejemplo $.get in jQuery) y luego analizarlo, tal vez utilizando una expresión regular, para extraer la pieza necesaria:

$.get('pathtoscript.js', function(scriptBody) { 
    var regex = /function\s+setUpLogo\(\)\s*\{[^}]+}/g; 
    alert(scriptBody.match(regex)[0]); // supposed to output a function called 
             // 'setUpLogo' from the script, if the 
             // function does not have {} blocks inside 
}); 

Sin embargo, se debe tener en cuenta que es muy probable que este enfoque provoque obstáculos de mantenimiento. Las expresiones regulares no son una mejor herramienta para analizar código JavaScript; el ejemplo anterior, por ejemplo, no analiza las funciones con bloques {} anidados, que bien pueden existir en el código en cuestión.

Se le puede recomendar que encuentre una solución del problema en el servidor, p. agregar la ruta de script necesaria o su parte antes de que la página se envíe al navegador.

+0

¡Me gusta tu idea! es un poco loco, pero supongo que funcionaría ... podría escribir una función para tomar un archivo, luego analizarlo para la función deseada, es una locura y probablemente una mala idea, pero ese pensamiento "fuera de la caja" es genial venir! :) – user1005240

0

No estoy seguro de que sea una buena idea pero puede crear un iframe y evaluar el archivo dentro de su objeto 'ventana' para evitar la mayoría de los efectos secundarios no deseados (suponiendo que no intente acceder a su elemento principal). Luego puede acceder a cualquier función/variable que quiera a través del objeto ventana del iframe.

Ejemplo:

function loadSomeJsInAFrame(url,cb) { 
     jQuery.get(url,function(res) { 
      iframe = jQuery('<iframe></iframe>').hide().appendTo(document.body); 
      iframe[0].contentWindow.eval(res); 
     if(cb) cb(iframe[0].contentWindow); 
    },'text'); 
} 

loadSomeJsInAFrame('test/testApp_1.js',function(frameWindow) { 
    console.log(frameWindow.setAppLogo()); 
    jQuery(frameWindow.frameElement).remove(); 
}); 

esto no garantiza que el sript en el archivo no se puede meter con el documento, pero no es probable si se trata de una fuente confiable.

Además, no olvide quitar su iframe después de obtener lo que necesita de él.

1

Puede beneficiarse de tener algún tipo de archivo app.js que contenga variables/valores globales que desee usar en muchos lugares. Debe incluir este archivo .js en cada página (y quizás minificarlo/concatenarlo con otros js si desea ser inteligente y mejorar el rendimiento). En general, estos elementos globales deben adjuntarse a algún objeto que cree, como var APPNAME = { }; con variables/funciones que se utilizarán en muchos lugares.

Una vez que tenga esto, el archivo externo '.js' que desea cargar, y el que se encuentra actualmente, ambos pueden acceder a la variable APPNAME global y todos sus atributos/funciones y usarlos como desee. Este puede ser un mejor enfoque para hacer que su javascript sea más modular e independiente. Espero que esto ayude.

0

Ok, gracias a todos por toda la entrada, pero creo que lo que estaba tratando de hacer actualmente no es posible, es decir, acceder a una función desde otro archivo sin cargar ese archivo. Sin embargo, he encontrado una solución a mi problema. Ahora consulto en mi servidor una lista de aplicaciones que están disponibles, luego uso esta lista para construir dinámicamente las aplicaciones en una UI. cuando se selecciona una aplicación, entonces puedo llamar a ese archivo y a las funciones que contiene. Es un poco más complejo pero es dinámico, tiene buen rendimiento y funciona. ¡Gracias de nuevo por la lluvia de ideas! ;)

0

Puede ser posible con la ayuda de Web Workers. Podrías ejecutar tu script que quisieras inyectar en un entorno algo aislado, para que no arruine tu página actual.

Como dijiste, es posible que setAppLogo sea global dentro de "test/testApp_1.js", así que confiaré en esta afirmación.

En el guión original se debe crear un trabajador, que las referencias a un archivo de script trabajador + escuchar los mensajes que provienen del trabajador:

var worker = new Worker('worker.js'); 
worker.onmessage = function (e) { 
    // .... 
}; 

Luego, en el trabajador (worker.js), usted podría use la función especial importScripts (docs) que permite cargar scripts externos en el trabajador, el trabajador también puede ver las variables globales de estos scripts. También hay una función postMessage disponible en el trabajador para enviar mensajes personalizados a la secuencia de comandos original, que a su vez está escuchando estos mensajes (worker.onmessage). Código de worker.js:

importScripts('test/testApp_1.js'); 

// "setAppLogo" is now available to worker as it is global in 'test/testApp_1.js' 

// use Worker API to send message back to original script 
postMessage(setAppLogo()); 

Cuando se invoca que obtendrá el resultado de setAppLogo en que escucha:

worker.onmessage = function (e) { 
    console.log(e.data); // "test/TestApp_1_Logo.png" 
}; 

Este ejemplo es muy básico, sin embargo, usted debe leer más sobre el API Web Workers y posible trampas.

Cuestiones relacionadas