Wywołanie funkcji javascript w innym pliku js

141

Chciałem wywołać funkcję zdefiniowaną w pliku first.js w pliku second.js. oba pliki są zdefiniowane w pliku HTML, takim jak:

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

Chcę zadzwonić fn1()zdefiniowany first.jsw second.js. Z moich wyszukiwań odpowiedzi były takie, że jeśli first.jsjest zdefiniowane jako pierwsze, jest to możliwe, ale z moich testów nie znalazłem żadnego sposobu, aby to zrobić.

Oto mój kod:

second.js

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

first.js

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

javascript html m0j1
źródło

6

Więc nazwij to, nie ma nic specjalnego, dopóki jest w zasięgu globalnym.

epascarello

1

Wszyscy robimy to tysiące razy dziennie. Jeśli nie możesz, musi być problem z Twoim first.js: Sprawdź, czy w ogóle jest załadowany do Twojej przeglądarki, a jeśli tak, czy wystąpił błąd składni podczas jego przetwarzania (oba można zobaczyć na pasku narzędzi programisty twojej przeglądarki)

rplantiko

2

To powinno działać. Edytuj swoje pytanie, aby powiedzieć nam, co się stanie, gdy uruchomisz to za pomocą konsoli JavaScript w przeglądarce Chrome lub Firefox / Firebug. (Um, i sprawdź, czy poprawnie wpisałeś nazwę funkcji.)

Bob Brown

2

Jeśli to nie zadziała, myślę, że robisz coś złego. Biorąc pod uwagę informacje zawarte w Twoim pytaniu, niemożliwe jest, aby tak było.

Felix Kling

2

Czy rzeczywisty kod.

epascarello

164

Funkcji nie można wywołać, chyba że została zdefiniowana w tym samym pliku lub została załadowana przed próbą wywołania.

Nie można wywołać funkcji, chyba że znajduje się w tym samym lub większym zakresie niż ta, która próbuje ją wywołać.

Deklarujesz funkcję fn1w first.js, a następnie w drugiej możesz po prostu miećfn1();

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
źródło

4

Jak więc najlepiej zarządzać tym wszystkim w aplikacji produkcyjnej?

Costa

18

to nie działa dla mnie. Daje błąd, że fn1 () nie jest zdefiniowana

Aayushi

10

U mnie to też nie działa. Czy jest jakieś obejście poza użyciem jquery getscript, ponieważ sugeruje to złą praktykę?

Vandolph Reyes

14

Dlaczego jest to zaakceptowana odpowiedź z 82 głosami, jeśli tak naprawdę nie działa?

Daniel

26

Jeśli to nie działa, prawdopodobnie zdefiniowałeś funkcję w czymś innym. Na przykład miałem swoją funkcję w $(document).ready(function() {...})bloku i nie działała. Poruszyłem go i zadziałało jak urok.

Michael Ziluck,

23

Możesz uczynić funkcję zmienną globalną w first.js i spojrzeć na zamknięcie i nie umieszczać go na document.readyzewnątrz

możesz też użyć Ajax

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

w ten sam sposób możesz użyć 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
źródło

7

Początkujący nigdy nie próbują robić czegoś takiego. Są to złe praktyki, których należy unikać. Dopóki strona internetowa zawiera odniesienia do obu, tak. Po prostu wywołujesz funkcje tak, jakby znajdowały się w tym samym pliku JS.

Ananda

Jedynym problemem jest to, że z jakiegoś powodu nie zawiera nagłówka.

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();
});

Mam nadzieję, że to pomoże ... Miłego kodowania.

Akshay Tyagi
źródło

2

Myślę, że masz na myślijQuery.getScript()

Pmpr

16

Możesz rozważyć użycie składni importu eksportu es6. W pliku 1;

export function f1() {...}

A potem w pliku 2;

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

Pamiętaj, że działa to tylko wtedy, gdy używasz <script src="./file2.js" type="module">

Jeśli zrobisz to w ten sposób, nie będziesz potrzebować dwóch tagów skryptu. Po prostu potrzebujesz głównego skryptu i możesz tam zaimportować wszystkie inne rzeczy.

tm2josep
źródło

Z Safari dostajęcross-origin script load denied by cross-origin resource sharing policy

kakyo

W starszych przeglądarkach możesz nie być w stanie użyć składni importu es6. Możesz użyć Babel, jeśli ci to ułatwi.

tm2josep

5

Powinno działać tak:

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>

wynik

Wypróbuj ten fragment kodu CodePen: link .

Consta Gorgan
źródło

4

Należy pamiętać, że działa to tylko wtedy, gdy

<script>

Tagi są w ciele, a NIE w głowie.

Więc

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

=> nieznana funkcja fn1 ()

Niepowodzenie i

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

Pracuje.

user213979
źródło

3

Użyj pamięci podręcznej, jeśli serwer pozwala na zwiększenie szybkości.

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
}

A potem użyj tego w ten sposób:

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

Opcjonalnie utwórz jego prototyp, aby był bardziej elastyczny. Aby nie musieć definiować pliku za każdym razem, gdy wywołujesz funkcję lub chcesz pobrać kod z wielu plików.

Thielicious
źródło

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
źródło

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
źródło

Chociaż fragment kodu może rozwiązać problem, powinieneś opisać, jaki jest cel kodu (jak rozwiązuje problem). Ponadto możesz sprawdzić stackoverflow.com/help/how-to-answer

Ahmad F

2

zadeklaruj funkcję w zakresie globalnym z oknem

first.js

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

second.js

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

zawierać w ten sposób

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

taoufiqaitali
źródło

1

To faktycznie nadchodzi bardzo późno, ale pomyślałem, że powinienem się podzielić,

w index.html

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

w 1.js

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

w 2.js

fn1()

Ishaq Yusuf
źródło

Zobacz komentarz OP pod pytaniem: „... właśnie eksperymentowałem [z] plikiem znajdującym się w złej lokalizacji o tej samej nazwie…”.

traktor53

1

użyj "var" podczas tworzenia funkcji, wtedy możesz uzyskać do niej dostęp z innego pliku. upewnij się, że oba pliki są dobrze połączone z projektem i mają do siebie dostęp.

plik_1.js

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

dostęp do tej funkcji / zmiennej w postaci pliku_2.js

firstLetterUppercase("gobinda");

wyjście => Gobinda

mam nadzieję, że to komuś pomoże, miłego kodowania !!!

iNandi
źródło

-1

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

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

odniesienie z https://hype.codes/how-include-js-file-another-js-file

Min Thant
źródło

-2

Miałem ten sam problem. Zdefiniowałem funkcje wewnątrz funkcji gotowej do dokumentu jquery .

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

I tę funkcję xyz () wywołałem w innym pliku. To nie działa :) Musisz zdefiniować funkcję powyżej gotowego dokumentu .

Meldo
źródło

Wywołanie funkcji javascript w innym pliku js

Odpowiedzi:

first.js

Second.js

index.html