Виклик функції javascript в іншому js-файлі

141

Я хотів викликати функцію, визначену у файлі first.js у файлі second.js. обидва файли визначені у файлі HTML на зразок:

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

Я хочу зателефонувати, fn1()визначені first.jsв second.js. З моїх запитів відповіді були, якщо first.jsвизначено спочатку, це можливо, але з моїх тестів я не знайшов способу це зробити.

Ось мій код:

second.js

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

first.js

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

javascript html

— m0j1
джерело

6

Так називаємо, нічого особливого немає, поки воно знаходиться в глобальному масштабі.

— epascarello

1

Ми все робимо це тисячу разів на день. Якщо ви не можете, має бути проблема з first.js: Перевірте, чи він взагалі завантажений у ваш веб-переглядач, і якщо так, чи була помилка синтаксису під час його розбору (обидва видно на панелі інструментів розробника. вашого браузера)

— rplantiko

2

Це має спрацювати. Відредагуйте своє запитання, щоб повідомити нам про те, що відбувається при запуску цього за допомогою консолі JavaScript у Chrome або Firefox / Firebug. (Гм, і перевірте, чи правильно ви написали ім’я функції.)

— Боб Браун

2

Якщо це не працює, я думаю, ви робите щось не так. Враховуючи інформацію у вашому запитанні, не можна, хоч це все-таки.

— Фелікс Клінг

2

Чи повинен бути фактичний код.

— epascarello

164

Функцію не можна викликати, якщо вона не була визначена в тому самому файлі або завантажена до спроби викликати її.

Функцію не можна викликати, якщо вона не в тій же чи більшої області, ніж та, яка намагається її викликати.

Ви оголошуєте функцію fn1в first.js, а потім у другій ви можете просто мати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>

— Фернандо Мендес
джерело

4

То який найкращий спосіб керувати усім цим у виробничому додатку?

— Коста

18

це не працює для мене.

— Подає

10

Це також не працює для мене. Чи є яка-небудь робота навколо, крім використання jquery getcript, як його підказки, погана практика?

— Вандольф Рейес

14

Чому це прийнята відповідь з 82 голосами, якщо вона насправді не працює?

— Даніель

26

Якщо це не працює для вас, швидше за все, ви визначите функцію в чомусь іншому. Наприклад, у мене була функція в $(document).ready(function() {...})блоці, і вона не працювала. Я перемістив його, і це спрацювало як шарм.

— Майкл Зілюк

23

Ви можете зробити функцію глобальною змінною в first.js і подивитися на закриття, а не document.readyставити її назовні

Ви також можете використовувати ajax

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

так само ви можете використовувати 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
джерело

7

Початківці ніколи не намагаються робити щось подібне. Це погані практики, яких слід уникати. Поки на обох посилається веб-сторінка, так. Ви просто викликаєте функції так, ніби вони знаходяться в одному файлі JS.

— Ананда

Єдине питання полягає в тому, що він не містить заголовка з якихось причин.

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

Сподіваюся, що це допомагає ... Щасливе кодування.

— Акшай Тяги
джерело

2

Я думаю, ти маєш на увазіjQuery.getScript()

— Pmpr

16

Можна розглянути можливість використання синтаксису експорту імпорту es6. У файлі 1;

export function f1() {...}

А потім у файл 2;

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

Зауважте, що це працює лише за умови використання <script src="./file2.js" type="module">

Два теги сценарію вам не знадобляться, якщо ви зробите це таким чином. Вам просто потрібен основний сценарій, і ви можете імпортувати туди всі інші речі.

— tm2josep
джерело

З Safari я отримуюcross-origin script load denied by cross-origin resource sharing policy

— kakyo

У старих браузерах ви не зможете використовувати синтаксис імпорту es6. Ви можете використовувати Babel, якщо вам це полегшиться.

— tm2josep

5

Це має працювати так:

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>

вихід

Спробуйте цей фрагмент CodePen: посилання .

— Конста Горган
джерело

4

Зверніть увагу, що це працює лише у випадку, коли

<script>

мітки знаходяться в тілі, а НЕ в голові.

Так

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

=> невідома функція fn1 ()

Невдачі та

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

працює.

— користувач213979
джерело

3

Використовуйте кеш, якщо ваш сервер дозволяє йому підвищити швидкість.

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
}

А потім використовуйте його так:

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

За бажанням, зробіть його прототип, щоб він був більш гнучким. Так що вам не доведеться визначати файл щоразу, якщо ви викликаєте функцію або хочете отримати код з кількох файлів.

— Тиелічний
джерело

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>

— Афсар
джерело

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
джерело

Хоча ваш фрагмент коду може вирішити проблему, ви повинні описати, яка мета вашого коду (як він вирішує проблему). Крім того, ви можете перевірити stackoverflow.com/help/how-to-answer

— Ahmad F

2

оголосити функцію в глобальному масштабі за допомогою вікна

first.js

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

second.js

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

включити так

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

— taoufiqaitali
джерело

1

Це насправді йде дуже пізно, але я думав, що варто поділитися,

в index.html

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

в 1.js

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

в 2.js

fn1()

— Ішак Юсуф
джерело

Будь ласка, дивіться коментар ОП під питанням: "... Я просто експериментував [з] файлом, розташованим у неправильному місці з однойменною назвою ...".

— traktor53

1

використовуйте "var" під час створення функції, тоді ви можете отримати доступ до цього з іншого файлу. переконайтесь, що обидва файли добре пов’язані з вашим проектом та мають доступ один до одного.

file_1.js

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

доступ до цієї функції / файлу змінної форми file_2.js

firstLetterUppercase("gobinda");

вихід => Гобінда

сподіваюся, що це допоможе комусь, щасливе кодування !!!

— iNandi
джерело

-1

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

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

посилання з https://hype.codes/how-include-js-file-another-js-file

— Мін Тант
джерело

-2

У мене була така ж проблема. У мене були визначені функції всередині функції готового документа jquery .

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

І цю функцію xyz () я викликав в іншому файлі. Це не працює :) Ви повинні визначити функцію, готову вище .

— Мелдо
джерело