Q

Cómo agregar jQuery en el archivo JS

2009-07-16 41 views 109 likes

109

Tengo un código específico para ordenar tablas. Como el código es común en la mayoría de las páginas, quiero hacer un archivo JS que tendrá el código y todas las páginas que lo usan pueden hacer referencia desde allí.Cómo agregar jQuery en el archivo JS

El problema es: ¿cómo agrego jQuery y el complemento del clasificador de tablas en ese archivo .js?

que hemos probado algo como esto:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></script>'); 
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></script>');

pero esto parece no funcionar.

¿Cuál es la mejor manera de hacerlo?

2009-07-16 Anonymous

+0

Voy a mencionar lo que algunos otros han dicho en sus respuestas. Esta no es realmente una buena idea. Si desea controlar qué archivos están incluidos en un lugar, utilice un archivo común en su servidor para escribir las etiquetas de scripts (por ejemplo, scripts.php generaría etiquetas de script para archivos js comunes). – Prestaul

+2

fusiona tablesorter y tu código. y use la lógica del lado del servidor para incluirla cuando la necesite. – galambalazs

A

Respuesta

0

¿Por qué usa Javascript para escribir las etiquetas de secuencia de comandos? Simplemente agregue las etiquetas de secuencia de comandos a la sección de su cabeza. Así, el documento será algo como esto:

<html> 
    <head> 
    <!-- Whatever you want here --> 
    <script src="/javascripts/jquery.js" type="text/javascript"></script> 
    <script src="/javascripts/jquery.tablesorter.js" type="text/javascript"></script> 
    </head> 
    <body> 
    The contents of the page. 
    </body> 
</html>

2009-07-16 21:30:15

+1

Estoy hablando de archivos JS. cómo agregar una referencia jQuery a un archivo JS –

+0

Jash, no puedes hacerlo. Los archivos de script no pueden ser referenciados en otros archivos de script. – Canavar

+3

Sí que pueden, Canavar. En lo que respecta al navegador, no importa si agrega etiquetas de script en el HTML o en un script en sí, porque interpreta el resultado de la misma manera. – Salty

0

Si document.write ('< \ guión ... ') no está funcionando, intente document.createElement (' script') ...

Aparte de eso, debe preocuparse por el tipo de sitio web que está creando. ¿De verdad cree que es una buena idea incluir archivos .js de archivos .js?

2009-07-16 21:30:42 ryansstack

0

simplemente copie el código de los dos archivos en su archivo en la parte superior.

o utilice algo como esto http://code.google.com/p/minify/ para combinar dinámicamente sus archivos.

Josh

2009-07-16 21:31:04 Josh

132

var script = document.createElement('script'); 
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js'; 
script.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(script);

2009-07-16 21:31:11

+14

Reemplazaría 'http: //' con '//' para un protocolo relativo. Suponiendo que funciona con la propiedad src. – azz

+0

@DerFlatulator: también necesito enviar una variable a este script incluido. ¿como hacer esto? como si tuviera que enviar una variable itemtype = 11 o itemtype = 22 a este archivo js incluido y luego usarlo en ese archivo en consecuencia – sqlchild

+0

'Se negó a cargar el script' –

5

El problema es que estés usando </script> dentro del guión, que está llegando a su fin la etiqueta script. Prueba esto:

document.writeln('<script src="/javascripts/jquery.js" type="text/javascript"></sc'+'ript>'); 
document.writeln('<script type="text/javascript" src="/javascripts/jquery.tablesorter.js"></sc'+'ript>');

2009-07-16 21:31:34 Salty

+2

esta solución no hace nada, ya que la etiqueta' script' ya estaba visto como una cadena, no como marcado. – RozzA

4

Theres un plugin para jQuery donde sólo se puede incluir los archivos necesarios en el archivo algún otro js, aquí está el enlace para que http://tobiasz123.wordpress.com/2007/08/01/include-script-inclusion-jquery-plugin/.

También esta línea document.write escribirá las etiquetas de script en el html que no está en su archivo js.

así que espero que esto podría ayudarle a salir, un poco con su problema

2009-07-16 21:34:03

+1

Este enlace ya no está disponible – SSchneid

5

Aquí está la solución, que adopté como una combinación de algunas de las soluciones propuestas en algunos otros foros.

De esta forma puede hacer referencia tanto a archivos css como a otros archivos js en un archivo js, por lo que solo podrá realizar cambios la próxima vez en un solo lugar. Por favor, avíseme si tiene alguna duda al respecto.

he hecho siguiente:

He creado un js con jQueryIncluder.js nombre

declarada y ejecutado siguiente código en este archivo

function getVirtualDirectory() { 
    var vDir = document.location.pathname.split('/'); 
    return '/' + vDir[1] + '/'; 
} 

function include_jQueryFilesToPage() { 
    var siteAddress = location.protocol + '//' + document.location.hostname + getVirtualDirectory(); 
    var jqCSSFilePath = siteAddress + 'includes/jQueryCSS/ehrgreen-theme/jquery-ui-1.8.2.custom.css'; 
    var jqCoreFilePath = siteAddress + 'includes/jquery-1.4.1.min.js'; 
    var jqUIFilePath = siteAddress + 'includes/jquery-ui-1.8.2.custom.min.js'; 
    var head = document.getElementsByTagName('head')[0]; 

    // jQuery CSS jnclude 
    var jqCSS = 'cssIDJQ'; // you could encode the css path itself to generate id. 
    if (!document.getElementById(jqCSS)) { 
    var link = document.createElement('link'); 
    link.id = jqCSS; 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = jqCSSFilePath; 
    link.media = 'all'; 
    head.appendChild(link); 
    } 

    // Core jQuery include 
    var jqc = "coreFileRefIDJQ"; 
    if (!document.getElementById(jqc)) 
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqc + '" src="' + jqCoreFilePath + '"></scr' + 'ipt>'); 

    // jQueryUI include 
    var jqUI = "uiFileRefIDJQ"; 
    if (!document.getElementById(jqUI)) 
    document.write('<scr' + 'ipt type="text/javascript" id="' + jqUI + '" src="' + jqUIFilePath + '"></scr' + 'ipt>'); 
} 

include_jQueryFilesToPage();

que hace referencia el anterior jQueryIncluder archivo .js en otro archivo js o xsl de mi.Proyecto de red de la siguiente manera:
```
<script type="text/javascript" src="~/includes/jQueryIncluder.js"></script> 
```

espero se aprecia mi esfuerzo.

Gracias

2010-06-30 10:11:16

1

Si con frecuencia desea actualizar su vínculo de archivo jQuery a una nueva versión del archivo, a través de su sitio en muchas páginas, en una sola vez ..

crear un archivo JavaScript (.js) y coloque el siguiente código y asigne este archivo javascript a todas las páginas (en lugar de asignar el archivo jquery directamente en la página), de modo que cuando el enlace del archivo jquery se actualice en este archivo javascript, se reflejará en todo el sitio.

El siguiente código está probado y funciona bien.

document.write('<'); 
document.write('script '); 
document.write('src="'); 
//next line is the path to jquery file 
document.write('/javascripts/jquery-1.4.1.js'); 
document.write('" type="text/javascript"></'); 
document.write('script'); 
document.write('>');

2010-12-01 14:11:37 Sam

69

Si desea incluir el código jQuery desde otro archivo JS, esto debería hacer el truco:

que tenía la siguiente en mi archivo HTML:

<script src="jquery-1.6.1.js"></script> 
<script src="my_jquery.js"></script>

he creado un my_jquery separada archivo .js con lo siguiente:

$(document).ready(function() { 
    $('a').click(function(event) { 
    event.preventDefault(); 
    $(this).hide("slow"); 
    }); 
});

2011-06-29 04:56:47

+3

Lol esta es una pregunta de hace 2 años y OP ha sido eliminada – genesis

+33

Entonces, qué, sigue siendo una buena respuesta, y podría ayudar a alguien más a buscar cómo hacerlo. ¡Bienvenido a stackoverflow, R-The_Master! –

+8

@genesis φ Este es actualmente el resultado superior de Google para 'jquery include js' y tiene 13k vistas jaja. – user495470

5

En si desea agregar referencia a cualquier archivo js, s ay, desde su proyecto, también puede agregarlo directamente usando la etiqueta reference, en Visual Studio IDE esto se maneja automáticamente arrastrando y soltando el archivo externo desde el explorador de soluciones al archivo actual (Esto funciona para archivos de marcado, .js & .css también archivos)

/// <reference path="jquery-2.0.3.js" />

2013-07-22 14:38:04 ablaze

1

Puede crear una base de página maestra sin los archivos js y jquery incluidos. Coloque un marcador de posición de contenido en la base de la página maestra en la sección principal y luego cree una página maestra anidada que herede de esta base de página maestra. Ahora ponga las incluye en un asp: contenido en la página principal anidada, finalmente, crear una página de contenido de esta página maestra anidada

Ejemplo:

//in master page base  

<%@ master language="C#" autoeventwireup="true" inherits="MasterPage" codebehind="MasterPage.master.cs" %> 
<html> 
<head id="Head1" runat="server"> 
    <asp:ContentPlaceHolder runat="server" ID="cphChildHead"> 
     <!-- Nested Master Page include Codes will sit Here --> 
    </asp:ContentPlaceHolder> 
</head> 
<body> 
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
    </asp:ContentPlaceHolder> 
    <!-- some code here --> 
</body> 
</html> 

//in nested master page : 
<%@ master language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" 
    codebehind="MasterPageLib.master.cs" inherits="sampleNameSpace" %> 
<asp:Content ID="headcontent" ContentPlaceHolderID="cphChildHead" runat="server"> 
    <!-- includes will set here a nested master page --> 
    <link href="../CSS/pwt-datepicker.css" rel="stylesheet" type="text/css" /> 

    <script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script> 

    <!-- other includes ;) --> 
</asp:Content> 
<asp:Content ID="bodyContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
    <asp:ContentPlaceHolder ID="cphChildBody" runat="server" EnableViewState="true"> 
     <!-- Content page code will sit Here --> 
    </asp:ContentPlaceHolder> 
</asp:Content>

2014-02-16 06:29:55

0

Me parece que la mejor manera es utilizar este ...

**<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>**

Esto es del proyecto Codecademy 'Make a Interactive Website'.

2015-10-19 09:10:50 Cassar234

5

no es posible importar archivos js dentro de otro js presentar

La manera de utilizar jQuery dentro js es

importación de los js en el html o lo que sea vista de la página que está utilizando en cuyo interior se se va a incluir el archivo de JS

view.html

<script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js"></script> 
<script src="<%=request.getContextPath()%>/js/default.js"></script>

predeterminado.js

$('document').ready(function() { 
    $('li#user').click(function() { 
     $(this).addClass('selectedEmp'); 
    }); 
});

esto definitivamente va a trabajar para usted

2015-12-30 04:26:09

6

/* 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 = "http://code.jquery.com/jquery-2.2.1.min.js"; 

    // Then bind the event to the callback function. 
    // There are several events for cross browser compatibility. 
    script.onreadystatechange = handler; 
    script.onload = handler; 

    // Fire the loading 
    head.appendChild(script); 

    function handler(){ 
     console.log('jquery added :)'); 
    }

2016-03-31 20:24:22

6

Puede usar el siguiente código para lograr jQuery carga en el archivo JS. También agregué un jQuery JSFiddle que funciona y utiliza una función de invocación automática.

// Anonymous "self-invoking" function 
 
(function() { 
 
    var startingTime = new Date().getTime(); 
 
    // Load the script 
 
    var script = document.createElement("SCRIPT"); 
 
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; 
 
    script.type = 'text/javascript'; 
 
    document.getElementsByTagName("head")[0].appendChild(script); 
 

 
    // Poll for jQuery to come into existance 
 
    var checkReady = function(callback) { 
 
     if (window.jQuery) { 
 
      callback(jQuery); 
 
     } 
 
     else { 
 
      window.setTimeout(function() { checkReady(callback); }, 20); 
 
     } 
 
    }; 
 

 
    // Start polling... 
 
    checkReady(function($) { 
 
     $(function() { 
 
      var endingTime = new Date().getTime(); 
 
      var tookTime = endingTime - startingTime; 
 
      window.alert("jQuery is loaded, after " + tookTime + " milliseconds!"); 
 
     }); 
 
    }); 
 
})();

otra opción: - Usted puede también tratar Require.JS que es un módulo del cargador de JS.

2016-03-31 20:38:15

+1

¡Mejor respuesta, muchas gracias! –

+0

Gracias @StevenSpyrka por su valiosa apreciación. –

Cuestiones relacionadas