Llamar a una función de JavaScript en otro archivo js

141

Quería llamar a una función definida en un archivo first.js en el archivo second.js. ambos archivos se definen en un archivo HTML como:

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

Quiero llamar fn1()definido first.jsen second.js. De mis búsquedas, las respuestas fueron si first.jsse define primero es posible, pero a partir de mis pruebas no he encontrado ninguna manera de hacerlo.

Aquí está mi código:

second.js

document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

function fn1() {
    alert("external fn clicked");
}

javascript html

— m0j1
fuente

66

Así que llámalo, no hay nada especial siempre y cuando tenga un alcance global.

— epascarello

1

Todos estamos haciendo esto miles de veces por día. Si no puede, debe haber un problema con su first.js: compruebe si está cargado en su navegador y, en caso afirmativo, si hubo un error de sintaxis al analizarlo (ambos se pueden ver en la barra de herramientas del desarrollador de su navegador)

— rplantiko

2

Eso debería funcionar. Edite su pregunta para contarnos qué sucede cuando ejecuta esto utilizando la consola de JavaScript en Chrome o Firefox / Firebug. (Um, y verifica que deletreaste el nombre de la función correctamente.)

— Bob Brown

2

Si no funciona, supongo que estás haciendo algo mal. Sin embargo, dada la información en su pregunta, es imposible quererlo.

— Felix Kling

2

Debe el código real.

— epascarello

164

No se puede llamar a una función a menos que se haya definido en el mismo archivo o en uno cargado antes del intento de llamarla.

No se puede invocar una función a menos que esté en el mismo o mayor alcance que el que intenta llamarla.

fn1Declaras la función en first.js, y luego en el segundo simplemente puedes tenerfn1();

1.js:

function fn1 () {
    alert();
}

2.js:

fn1();

index.html:

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

— Fernando Mendez
fuente

44

Entonces, ¿cuál es la mejor manera de gestionar todo esto en una aplicación de producción?

— Costa

18

Esto no funciona para mí. Da un error de que fn1 () no está definido

— Aayushi

10

Esto tampoco funciona para mí. ¿Hay alguna solución, excepto el uso de jquery getscript, ya que sugiere una mala práctica?

— Vandolph Reyes

14

¿Por qué es esta la respuesta aceptada con 82 votos si realmente no funciona?

— Daniel

26

Si esto no funciona para usted, es probable que haya definido la función dentro de otra cosa. Por ejemplo, tenía mi función dentro de un $(document).ready(function() {...})bloque, y no funcionó. Lo moví y funcionó a las mil maravillas.

— Michael Ziluck

23

Puede hacer que la función sea una variable global first.js y echar un vistazo al cierre y no ponerla en el document.readyexterior

puedes usar ajax también

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

de la misma manera que puede usar jquery getScript

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

— Gildas.Tambo
fuente

77

Los principiantes nunca intentan hacer algo como esto. Estas son malas prácticas que deben evitarse. Siempre que la página web haga referencia a ambos, sí. Simplemente llame a las funciones como si estuvieran en el mismo archivo JS.

— Ananda

El único problema es que no incluye el encabezado por alguna razón.

— Si8

21

1st JS:

function fn(){
   alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}

2nd JS:

$.getscript("url or name of 1st Js File",function(){
fn();
});

Espero que esto ayude ... Feliz codificación.

— Akshay Tyagi
fuente

2

Creo que te refieresjQuery.getScript()

— Pmpr

16

Podría considerar usar la sintaxis de exportación e importación es6. En el archivo 1;

export function f1() {...}

Y luego en el archivo 2;

import { f1 } from "./file1.js";
f1();

Tenga en cuenta que esto solo funciona si está utilizando <script src="./file2.js" type="module">

No necesitará dos etiquetas de script si lo hace de esta manera. Simplemente necesita el script principal, y puede importar todas sus otras cosas allí.

— tm2josep
fuente

Con Safari, consigocross-origin script load denied by cross-origin resource sharing policy

— kakyo

Con navegadores más antiguos, es posible que no pueda usar la sintaxis de importación es6. Podrías usar Babel si te lo pone más fácil.

— tm2josep

5

Debería funcionar así:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
}

index.html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

salida

Pruebe este fragmento de CodePen: enlace .

— Consta Gorgan
fuente

4

Tenga en cuenta que esto solo funciona si el

<script>

Las etiquetas están en el cuerpo y NO en la cabeza.

Entonces

<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>

=> función desconocida fn1 ()

Falla y

<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>

trabajos.

— usuario213979
fuente

3

Use caché si su servidor le permite mejorar la velocidad.

var extern =(url)=> {           // load extern javascript
    let scr = $.extend({}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return $.ajax(scr);
}
function ext(file, func) {
    extern(file).done(func);    // calls a function from an extern javascript file
}

Y luego úsalo así:

ext('somefile.js',()=>              
    myFunc(args)
);

Opcionalmente, haga un prototipo para que sea más flexible. Para que no tenga que definir el archivo cada vez, si llama a una función o si desea obtener código de varios archivos.

— Thielicious
fuente

3

first.js

function first() { alert("first"); }

Second.js

var imported = document.createElement("script");
imported.src = "other js/first.js";  //saved in "other js" folder
document.getElementsByTagName("head")[0].appendChild(imported);


function second() { alert("Second");}

index.html

 <HTML>
    <HEAD>
       <SCRIPT SRC="second.js"></SCRIPT>
    </HEAD>
    <BODY>
       <a href="javascript:second()">method in second js</a><br/>
       <a href="javascript:first()">method in firstjs ("included" by the first)</a>
    </BODY>
</HTML>

— Afsar
fuente

2

window.onload = function(){
    document.getElementById("btn").onclick = function(){
        fn1();
    }
   // this should work, It calls when all js files loaded, No matter what position you have written
});

— phpnerd
fuente

Aunque su fragmento de código puede resolver el problema, debe describir cuál es el propósito de su código (cómo resuelve el problema). Además, es posible que desee consultar stackoverflow.com/help/how-to-answer

— Ahmad F

2

declarar función en ámbito global con ventana

first.js

window.fn1 = function fn1() {
    alert("external fn clicked");
}

second.js

document.getElementById("btn").onclick = function() {
   fn1();
}

incluir así

<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

— taoufiqaitali
fuente

1

Esto en realidad está llegando muy tarde, pero pensé que debería compartir,

en index.html

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

en 1.js

fn1 = function() {
    alert("external fn clicked");
}

en 2.js

fn1()

— Ishaq Yusuf
fuente

Consulte el comentario del OP bajo la pregunta: "... Estaba experimentando [con] un archivo ubicado en una ubicación incorrecta con el mismo nombre ...".

— traktor53

1

use "var" mientras crea la función, luego puede acceder a eso desde otro archivo. asegúrese de que ambos archivos estén bien conectados a su proyecto y puedan acceder entre sí.

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

accediendo a esta función / archivo de forma variable file_2.js

firstLetterUppercase("gobinda");

salida => Gobinda

Espero que esto ayude a alguien, ¡feliz codificación!

— iNandi
fuente

-1

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

referencia de https://hype.codes/how-include-js-file-another-js-file

— Min Thant
fuente

-2

He tenido el mismo problema He tenido funciones definidas dentro de la función jquery document ready .

$(document).ready(function() {
   function xyz()
   {
       //some code
   }
});

Y esta función xyz () la he llamado en otro archivo. Esto no funciona :) Tienes que definir la función arriba del documento listo .

— Meldo
fuente