Chamando uma função javascript em outro arquivo js

141

Eu queria chamar uma função definida em um arquivo first.js no arquivo second.js. ambos os arquivos são definidos em um arquivo HTML como:

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

Quero chamar fn1()definido first.jsem second.js. Nas minhas pesquisas, as respostas foram first.jsdefinidas se primeiro for possível, mas nos meus testes não encontrei nenhuma maneira de fazer isso.

Aqui está o meu código:

second.js

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

first.js

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

javascript html

— m0j1
fonte

6

Então, chame, não há nada de especial, desde que esteja no escopo global.

— epascarello 21/09/14

1

Estamos todos fazendo isso milhares de vezes por dia. Se não puder, deve haver um problema com o seu first.js: verifique se ele está carregado no seu navegador e, se sim, se houve um erro de sintaxe ao analisá-lo (ambos podem ser vistos na barra de ferramentas do desenvolvedor do seu navegador)

— rplantiko 21/09/14

2

Isso deve funcionar. Edite sua pergunta para nos dizer o que acontece quando você executa isso usando o console JavaScript no Chrome ou Firefox / Firebug. (Um e verifique se você digitou o nome da função corretamente.)

— Bob Brown

2

Se não funcionar, acho que você está fazendo algo errado. Dadas as informações em sua pergunta, é impossível querer que seja.

— Felix Kling

2

Deve o código real.

— epascarello

164

Uma função não pode ser chamada, a menos que tenha sido definida no mesmo arquivo ou em uma carregada antes da tentativa de chamá-la.

Uma função não pode ser chamada, a menos que esteja no mesmo ou maior escopo do que a que está tentando chamá-la.

Você declara a função fn1no first.js e, em seguida, no segundo, você pode simplesmente terfn1();

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
fonte

4

Então, qual é a melhor maneira de gerenciar tudo isso em um aplicativo de produção?

— Costa

18

isso não funciona para mim. Dá um erro que FN1 () não está definido

— Aayushi

10

Isso não funciona para mim também. Existe alguma solução alternativa, exceto o uso de jquery getscript, pois sugere uma má prática?

— vandolph Reyes

14

Por que essa é a resposta aceita com 82 votos, se realmente não funciona?

— Daniel

26

Se isso não funcionar, é provável que você tenha definido a função dentro de outra coisa. Por exemplo, eu tinha minha função dentro de um $(document).ready(function() {...})bloco e não funcionou. Eu mudei e funcionou como um encanto.

— Michael Ziluck

23

Você pode transformar a função em uma variável global, first.js observar o fechamento e não colocá-lo emdocument.ready lo fora

você também pode usar ajax

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

Da mesma maneira que você pode usar o 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
fonte

7

Iniciantes nunca tentam fazer algo assim. Essas são práticas ruins a serem evitadas. Contanto que ambos sejam referenciados pela página da web, sim. Você simplesmente chama as funções como se elas estivessem no mesmo arquivo JS.

— Ananda

O único problema é que ele não inclui o cabeçalho por algum motivo.

— Si8

21

1ª JS:

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

2º JS:

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

Espero que isso ajude ... Feliz codificação.

— Akshay Tyagi
fonte

2

Eu acho que você quer dizerjQuery.getScript()

— PMPR

16

Você pode considerar o uso da sintaxe de exportação e importação es6. No arquivo 1;

export function f1() {...}

E então no arquivo 2;

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

Observe que isso só funciona se você estiver usando <script src="./file2.js" type="module">

Você não precisará de duas tags de script se fizer dessa maneira. Você simplesmente precisa do script principal e pode importar todos os seus outros itens para lá.

— tm2josep
fonte

Com o Safari, eu recebocross-origin script load denied by cross-origin resource sharing policy

— kakyo 23/04

Em navegadores antigos, talvez você não consiga usar a sintaxe de importação es6. Você pode usar o Babel se isso for mais fácil para você.

— tm2josep 18/06

5

Deve funcionar assim:

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>

resultado

Experimente este snippet CodePen: link .

— Consta Gorgan
fonte

4

Observe que isso só funciona se o

<script>

as tags estão no corpo e NÃO na cabeça.

assim

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

=> função desconhecida fn1 ()

Falha e

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

trabalho.

— user213979
fonte

3

Use cache se o servidor permitir melhorar a velocidade.

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
}

E então use-o assim:

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

Opcionalmente, faça um protótipo para torná-lo mais flexível. Para que você não precise definir o arquivo todas as vezes, se chamar uma função ou desejar buscar código de vários arquivos.

— Thielicious
fonte

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
fonte

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
fonte

Embora seu snippet de código possa resolver o problema, você deve descrever qual é o objetivo do seu código (como ele resolve o problema). Além disso, convém verificar stackoverflow.com/help/how-to-answer

— Ahmad F

2

declarar função no escopo global com janela

first.js

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

second.js

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

incluir assim

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

— taoufiqaitali
fonte

1

Isso está chegando muito tarde, mas pensei em compartilhar,

em index.html

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

em 1.js

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

em 2.js

fn1()

— Ishaq Yusuf
fonte

Por favor, veja o comentário do OP sob a pergunta: "... eu estava apenas experimentando [com] um arquivo localizado em um local errado com o mesmo nome ...".

— traktor53

1

use "var" ao criar a função, e poderá acessá-la a partir de outro arquivo. verifique se os dois arquivos estão bem conectados ao seu projeto e se podem acessar um ao outro.

file_1.js

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

acessando esta função / formulário variável file_2.js

firstLetterUppercase("gobinda");

output => Gobinda

espero que isso ajude alguém, codificação feliz !!!

— iNandi
fonte

-1

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

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

referência de https://hype.codes/how-include-js-file-another-js-file

— Min Thant
fonte

-2

Eu tive o mesmo problema. Eu tive funções definidas dentro da função jquery document ready .

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

E essa função xyz () chamei em outro arquivo. Isso não funciona :) Você precisa definir a função acima do documento pronto .

— Meldo
fonte