javascript - type - ¿Cómo puedo obtener el contenido del archivo especificado como ''src'' de una etiqueta<script>?
script type= text/javascript src= (16)
¿Desea obtener el contenido del archivo http://www.example.com/script.js ? Si es así, podría recurrir a los métodos AJAX para recuperar su contenido, suponiendo que resida en el mismo servidor que la página misma.
¿Podría explicar más sobre lo que está tratando de lograr?
Si tengo una etiqueta de script como esta:
<script
id = "myscript"
src = "http://www.example.com/script.js"
type = "text/javascript">
</script>
Me gustaría obtener el contenido del archivo "script.js". Estoy pensando en algo como document.getElementById("myscript").text pero no funciona en este caso.
¿No estás seguro de por qué necesitarías hacer esto?
Otra manera sería mantener el script en un elemento oculto en alguna parte y usar Eval para ejecutarlo. A continuación, puede consultar los objetos innerHtml property.
.text obtuvo los contenidos de la etiqueta, es solo que no tiene nada entre la etiqueta abierta y la etiqueta final. Puede obtener el atributo src del elemento usando .src, y luego, si desea obtener el archivo javascript, debe seguir el enlace y hacer una solicitud ajax para ello.
Desea utilizar la propiedad innerHTML para obtener el contenido de la etiqueta de script:
document.getElementById("myscript").innerHTML
Pero como @olle dijo en otra respuesta, probablemente quieras leer: http://ejohn.org/blog/degrading-script-tags/
En un comentario a mi respuesta anterior:
Quiero almacenar el contenido de la secuencia de comandos para que pueda guardarla en la memoria caché y usarla directamente algún tiempo después sin tener que recuperarla del servidor web externo (no en el mismo servidor que la página)
En ese caso, es mejor utilizar una secuencia de comandos del lado del servidor para recuperar y almacenar en caché el archivo de script. Dependiendo de la configuración de su servidor, puede actualizar el archivo (periódicamente a través de cron si espera que cambie) o hacer algo similar con un pequeño script en el idioma de su elección.
Espero que ya estés usando alguna biblioteca de JavaScript ...
¿Qué tal obtener el valor del atributo src, la URL, y luego usar las herramientas Ajax de tu biblioteca para realizar una solicitud a esa URL y guardar ese resultado donde desees?
Los detalles específicos variarán según la biblioteca que esté utilizando.
No creo que los contenidos estén disponibles a través del DOM. Puede obtener el valor del atributo src y usar AJAX para solicitar el archivo del servidor.
Sé que es un poco tarde, pero algunos navegadores admiten la etiqueta LINK rel="import" .
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
<link rel="import" href="/path/to/imports/stuff.html">
Por lo demás, ajax sigue siendo la forma preferida.
Sí, Ajax es la manera de hacerlo, como en la respuesta aceptada. Si llega a los detalles, hay muchas trampas. Si usa jQuery.load(...) , se asume el tipo de contenido incorrecto (html en lugar de application / javascript), lo que puede ensuciar las cosas al colocar texto no deseado en su (scriptNode) .innerText, y cosas por el estilo . Luego, si usa jQuery.getScript(...) , el script descargado se ejecuta inmediatamente, lo que podría no ser lo que usted desea (podría arruinar el orden en el que desea cargar los archivos, en caso de que tenga varios de esos .)
Me pareció mejor utilizar jQuery.ajax con dataType: "text"
Utilicé esta técnica de Ajax en un proyecto con un conjunto de marcos, donde el conjunto de marcos y / o varios marcos necesitan el mismo JavaScript, para evitar que el servidor envíe ese JavaScript varias veces.
Aquí está el código, probado y funcionando:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script id="scriptData">
var scriptData = [
{ name: "foo" , url: "path/to/foo" },
{ name: "bar" , url: "path/to/bar" }
];
</script>
<script id="scriptLoader">
var LOADER = {
loadedCount: 0,
toBeLoadedCount: 0,
load_jQuery: function (){
var jqNode = document.createElement("script");
jqNode.setAttribute("src", "/path/to/jquery");
jqNode.setAttribute("onload", "LOADER.loadScripts();");
jqNode.setAttribute("id", "jquery");
document.head.appendChild(jqNode);
},
loadScripts: function (){
var scriptDataLookup = this.scriptDataLookup = {};
var scriptNodes = this.scriptNodes = {};
var scriptNodesArr = this.scriptNodesArr = [];
for (var j=0; j<scriptData.length; j++){
var theEntry = scriptData[j];
scriptDataLookup[theEntry.name] = theEntry;
}
//console.log(JSON.stringify(scriptDataLookup, null, 4));
for (var i=0; i<scriptData.length; i++){
var entry = scriptData[i];
var name = entry.name;
var theURL = entry.url;
this.toBeLoadedCount++;
var node = document.createElement("script");
node.setAttribute("id", name);
scriptNodes[name] = node;
scriptNodesArr.push(node);
jQuery.ajax({
method : "GET",
url : theURL,
dataType : "text"
}).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node));
}
},
makeFailHandler: function(name, node){
var THIS = this;
return function(xhr, errorName, errorMessage){
console.log(name, "FAIL");
console.log(xhr);
console.log(errorName);
console.log(errorMessage);
debugger;
}
},
makeHandler: function(name, node){
var THIS = this;
return function (fileContents, status, xhr){
THIS.loadedCount++;
//console.log("loaded", name, "content length", fileContents.length, "status", status);
//console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount);
THIS.scriptDataLookup[name].fileContents = fileContents;
if (THIS.loadedCount >= THIS.toBeLoadedCount){
THIS.allScriptsLoaded();
}
}
},
allScriptsLoaded: function(){
for (var i=0; i<this.scriptNodesArr.length; i++){
var scriptNode = this.scriptNodesArr[i];
var name = scriptNode.id;
var data = this.scriptDataLookup[name];
var fileContents = data.fileContents;
var textNode = document.createTextNode(fileContents);
scriptNode.appendChild(textNode);
document.head.appendChild(scriptNode); // execution is here
//console.log(scriptNode);
}
// call code to make the frames here
}
};
</script>
</head>
<frameset rows="200pixels,*" onload="LOADER.load_jQuery();">
<frame src="about:blank"></frame>
<frame src="about:blank"></frame>
</frameset>
</html>
Si está buscando acceder a los atributos de la etiqueta <script> lugar de los contenidos de script.js, entonces XPath bien podría ser lo que está buscando.
Le permitirá obtener cada uno de los atributos del script.
Si se trata del contenido del archivo example.js que está buscando, puede lanzar una solicitud AJAX para recuperarlo.
Si se proporciona un atributo src, los agentes de usuario deben ignorar el contenido del elemento , si necesita acceder desde el script externo, entonces probablemente esté haciendo algo mal.
Actualización: veo que ha agregado un comentario en el sentido de que desea almacenar en caché el script y usarlo más adelante. ¿A que final? Suponiendo que su HTTP es compatible con la memoria caché, es probable que el navegador ya tenga en cuenta sus necesidades de almacenamiento en caché.
Sugeriría que la respuesta a esta pregunta es usar la propiedad "innerHTML" del elemento DOM. Ciertamente, si el script se ha cargado , no necesita hacer una llamada Ajax para obtenerlo.
Entonces Sugendran debería estar en lo correcto (no estoy seguro de por qué fue rechazado sin explicación).
var scriptContent = document.getElementById("myscript").innerHTML;
La propiedad innerHTML del elemento script debe proporcionarle el contenido de scripts como una cadena siempre que el elemento script sea:
- una secuencia de comandos en línea, o
- que el script ha cargado (si usa el atributo src)
olle también da la respuesta, pero creo que se "confunde" al sugerir que debe cargarse a través de ajax primero, y creo que quiso decir "en línea" en lugar de en medio.
si tu tienes el js entre y puedes acceder a él a través de innerHTML.
En cuanto a la utilidad de esta técnica:
He buscado utilizar esta técnica para el registro de errores del lado del cliente (de excepciones de JavaScript) después de obtener "variables indefinidas" que no están contenidas en mis propios scripts (como scripts mal inyectados desde barras de herramientas o extensiones), así que no creo que es una idea de salida.
Usando el estilo DOM-binding de estilo 2008, sería más bien:
document.getElementById(''myscript'').getAttribute("src");
document.getElementById(''myscript'').getAttribute("type");
Yo tuve el mismo problema. No parece haber una manera (corta de ajax) de resolver esto en archivos html. Pero cuando estoy en php, al menos, lo siguiente ha demostrado ser muy útil:
<script type="text/javascript" id="myScript"><?php readfile(''filepath/myScript.js''); ?></script>
Luego puede tomar el contenido de la etiqueta del script con un texto getElementById(''myScript'').text;
si quieres los contenidos del atributo src, deberías hacer una solicitud de ajax y mirar el texto de respuesta. Si tuvieras el js entre y podrías acceder a él a través de innerHTML.
Esto podría ser de interés: http://ejohn.org/blog/degrading-script-tags/
Las etiquetas de script tl; dr no están sujetas a CORS ni a la same-origin-policy y, por lo tanto, javascript / DOM no puede ofrecer acceso al contenido de texto del recurso cargado a través de una etiqueta <script> , o rompería la same-origin-policy .
versión larga: la mayoría de las otras respuestas (y la respuesta aceptada) indican correctamente que la forma " correcta " de insertar el contenido de texto de un archivo javascript insertado a través de un <script> cargado en la página, es usar XMLHttpRequest para realizar otra operación separada solicitud adicional para el recurso indicado en la propiedad src scripts, algo que demostrará el código corto de javascript a continuación. Sin embargo, encontré que las otras respuestas no abordaban el tema de por qué obtener el contenido de texto de los archivos javascript, que es que permitir acceder al contenido del archivo incluido a través del <script src=[url]></script> rompería los CORS las políticas, por ejemplo, los navegadores modernos impiden que el XHR de los recursos que no proporcionan el encabezado Access-Control-Allow-Origin , por lo tanto, los navegadores no permitan otra cosa que las sujetas a CORS , obtengan el contenido.
Con el siguiente código (como se menciona en las otras preguntas "use XHR / AJAX"), es posible hacer otra solicitud para todas las etiquetas de guiones que no estén en línea en el documento.
function printScriptTextContent(script)
{
var xhr = new XMLHttpRequest();
xhr.open("GET",script.src)
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log("the script text content is",xhr.responseText);
}
};
xhr.send();
}
Array.prototype.slice.call(document.querySelectorAll("script[src]")).forEach(printScriptTextContent);
y entonces no voy a repetir eso, sino que me gustaría agregar a través de esta respuesta el aspecto por el cual