Вызов функции javascript в другом файле js

Question 1

Я хотел вызвать функцию, определенную в файле 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");
}

Question 2

Функция не может быть вызвана, если она не была определена в том же файле или загружена до попытки ее вызова.

Функция не может быть вызвана, если она не находится в той же или большей области, чем та, которая пытается ее вызвать.

Вы объявляете функцию 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>

Question 3

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

Надеюсь, это поможет ... Удачного кодирования.

Question 4

Вы можете сделать функцию глобальной переменной внутри 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." );
});

Question 5

Вы можете рассмотреть возможность использования синтаксиса импорта и экспорта es6. В файле 1;

export function f1() {...}

А затем в файле 2;

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

Обратите внимание, что это работает, только если вы используете <script src="./file2.js" type="module">

Если вы сделаете это таким образом, вам не понадобятся два тега скрипта. Вам просто нужен основной скрипт, и вы можете импортировать туда все свои вещи.

Question 6

Это должно работать так:

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: ссылка .

Question 7

Обратите внимание, это работает, только если

<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>

работает.

Question 8

Используйте кеш, если ваш сервер позволяет увеличить скорость.

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

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

Question 9

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>

Question 10

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

Question 11

объявить функцию в глобальной области с окном

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>

Question 12

На самом деле это происходит очень поздно, но я подумал, что должен поделиться,

в 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()

Question 13

используйте «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");

output => Gobinda

надеюсь, это кому-нибудь поможет, удачного кодирования !!!

Question 14

Моя идея состоит в том, чтобы позволить двум функциям вызова JavaScript через DOM.

Способ сделать это просто ... Нам просто нужно определить скрытый html-тег js_ipc. После того, как регистр вызываемого абонента щелкнет по скрытому тегу js_ipc, вызывающий абонент может отправить событие щелчка, чтобы вызвать вызываемого. И аргумент сохраняется в том случае, если вы хотите пройти.

Когда нам нужно использовать вышеуказанный способ?

Иногда два кода javascript очень сложно интегрировать, и там так много асинхронного кода. И в другом коде используется разная структура, но вам все равно нужен простой способ их интеграции.

Так что в таком случае сделать это непросто.

При реализации своего проекта я встречаюсь с таким случаем, который очень сложно интегрировать. И, наконец, я обнаружил, что мы можем позволить двум javascript вызывать друг друга через DOM.

Я демонстрирую этот способ в этом коде git. вы можете пройти через это. (Или прочтите его с https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Anywhere, Here, я пытаюсь объяснить следующим простым случаем. Я надеюсь, что этот способ поможет вам интегрировать два разных кода javascript проще, чем раньше, нет какой-либо библиотеки JavaScript для поддержки связи между двумя файлами javascript, созданными разными командами.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

И код css / style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js / caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js / callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}

Question 15

// 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

Question 16

У меня была такая же проблема. У меня были определенные функции внутри функции готовности документа jquery .

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

И эту функцию xyz () я вызвал в другом файле. Это не работает :) Вы должны определить функцию над готовым документом .

Answer 1

153

Я хотел вызвать функцию, определенную в файле 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

Answer 2

6

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

epascarello

Answer 3

1

Мы все делаем это тысячу раз в день. Если вы не можете, значит, проблема с вашим first.js: проверьте, загружен ли он вообще в ваш браузер, и, если да, не возникла ли синтаксическая ошибка при его анализе (оба можно увидеть на панели инструментов разработчика. вашего браузера)

rplantiko

Answer 4

2

Это должно сработать. Измените свой вопрос, чтобы сообщить нам, что происходит, когда вы запускаете это с помощью консоли JavaScript в Chrome или Firefox / Firebug. (Гм, и убедитесь, что вы правильно написали имя функции.)

Боб Браун

Answer 5

2

Если не работает, значит, вы что-то не так делаете. Учитывая информацию в вашем вопросе, это невозможно.

Феликс Клинг,

Answer 6

2

Если актуальный код.

epascarello

Answer 7

172

Функция не может быть вызвана, если она не была определена в том же файле или загружена до попытки ее вызова.

Функция не может быть вызвана, если она не находится в той же или большей области, чем та, которая пытается ее вызвать.

Вы объявляете функцию 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>

Фернандо Мендес
источник

5

Итак, как лучше всего управлять всем этим в производственном приложении?

Costa

20

это не работает для меня. Выдает ошибку о том, что fn1 () не определена

Ааюши 03

11

У меня это тоже не работает. Есть ли какая-нибудь работа, кроме использования jquery getscript, поскольку это предполагает плохую практику?

Vandolph Reyes

15

Почему это принятый ответ с 82 голосами, если он действительно не работает?

Daniel

27

Если это не работает для вас, скорее всего, вы определили функцию в чем-то другом. Например, у меня была функция внутри $(document).ready(function() {...})блока, и она не работала. Я переместил его, и он работал как шарм.

Michael Ziluck

Answer 8

5

Итак, как лучше всего управлять всем этим в производственном приложении?

Costa

Answer 9

20

это не работает для меня. Выдает ошибку о том, что fn1 () не определена

Ааюши 03

Answer 10

11

У меня это тоже не работает. Есть ли какая-нибудь работа, кроме использования jquery getscript, поскольку это предполагает плохую практику?

Vandolph Reyes

Answer 11

15

Почему это принятый ответ с 82 голосами, если он действительно не работает?

Daniel

Answer 12

27

Если это не работает для вас, скорее всего, вы определили функцию в чем-то другом. Например, у меня была функция внутри $(document).ready(function() {...})блока, и она не работала. Я переместил его, и он работал как шарм.

Michael Ziluck

Answer 13

25

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

Надеюсь, это поможет ... Удачного кодирования.

Акшай Тяги
источник

3

Я думаю, вы имеете в видуjQuery.getScript()

Pmpr

@Pmpr, знак доллара - это сокращение от jQuery.

Сафван Самсудин,

Answer 14

3

Я думаю, вы имеете в видуjQuery.getScript()

Pmpr

Answer 15

@Pmpr, знак доллара - это сокращение от jQuery.

Сафван Самсудин,

Answer 16

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." );
});

Гильдас.Тамбо
источник

7

Новички никогда не пробуют делать что-то подобное. Это плохие методы, которых следует избегать. Да, если на них ссылается веб-страница. Вы просто вызываете функции, как если бы они были в одном файле JS.

Ананда

Единственная проблема в том, что он по какой-то причине не включает заголовок.

Si8

Answer 17

7

Новички никогда не пробуют делать что-то подобное. Это плохие методы, которых следует избегать. Да, если на них ссылается веб-страница. Вы просто вызываете функции, как если бы они были в одном файле JS.

Ананда

Answer 18

Единственная проблема в том, что он по какой-то причине не включает заголовок.

Si8

Answer 19

18

Вы можете рассмотреть возможность использования синтаксиса импорта и экспорта 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

Как (экспортировать и) импортировать все содержимое файла file1.js?

Payne

Answer 20

С Safari я получаюcross-origin script load denied by cross-origin resource sharing policy

kakyo

Answer 21

В старых версиях браузеров вы не сможете использовать синтаксис импорта es6. Вы можете использовать Babel, если вам будет проще.

tm2josep

Answer 22

Как (экспортировать и) импортировать все содержимое файла file1.js?

Payne

Answer 23

Это должно работать так:

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: ссылка .

Answer 24

Обратите внимание, это работает, только если

<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>

работает.

Answer 25

Используйте кеш, если ваш сервер позволяет увеличить скорость.

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

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

Answer 26

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>

Answer 27

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
источник

1

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

Ахмад Ф,

Answer 28

1

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

Ахмад Ф,

Answer 29

объявить функцию в глобальной области с окном

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>

Answer 30

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

Исхак Юсуф
источник

См. Комментарий OP под вопросом: «... Я просто экспериментировал [с] файлом, расположенным в неправильном месте с тем же именем ...».

traktor53

Answer 31

См. Комментарий OP под вопросом: «... Я просто экспериментировал [с] файлом, расположенным в неправильном месте с тем же именем ...».

traktor53

Answer 32

используйте «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");

output => Gobinda

надеюсь, это кому-нибудь поможет, удачного кодирования !!!

Answer 33

Моя идея состоит в том, чтобы позволить двум функциям вызова JavaScript через DOM.

Способ сделать это просто ... Нам просто нужно определить скрытый html-тег js_ipc. После того, как регистр вызываемого абонента щелкнет по скрытому тегу js_ipc, вызывающий абонент может отправить событие щелчка, чтобы вызвать вызываемого. И аргумент сохраняется в том случае, если вы хотите пройти.

Когда нам нужно использовать вышеуказанный способ?

Иногда два кода javascript очень сложно интегрировать, и там так много асинхронного кода. И в другом коде используется разная структура, но вам все равно нужен простой способ их интеграции.

Так что в таком случае сделать это непросто.

При реализации своего проекта я встречаюсь с таким случаем, который очень сложно интегрировать. И, наконец, я обнаружил, что мы можем позволить двум javascript вызывать друг друга через DOM.

Я демонстрирую этот способ в этом коде git. вы можете пройти через это. (Или прочтите его с https://github.com/milochen0418/javascript-ipc-demo )

git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e

Anywhere, Here, я пытаюсь объяснить следующим простым случаем. Я надеюсь, что этот способ поможет вам интегрировать два разных кода javascript проще, чем раньше, нет какой-либо библиотеки JavaScript для поддержки связи между двумя файлами javascript, созданными разными командами.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="js_ipc" style="display:none;"></div>
    <div id="test_btn" class="btn">
        <a><p>click to test</p></a>
    </div>    
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>

И код css / style.css

.btn {
    background-color:grey;
    cursor:pointer;
    display:inline-block;
}

js / caller.js

function caller_add_of_ipc(num1, num2) {
    var e = new Event("click");
    e.arguments = arguments;
    document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
    console.log("click to invoke caller of IPC");
    caller_add_of_ipc(33, 22);      
});

js / callee.js

document.getElementById("js_ipc").addEventListener('click', (e)=>{
    callee_add_of_ipc(e.arguments);
});    
function callee_add_of_ipc(arguments) {
    let num1 = arguments[0];
    let num2 = arguments[1];
    console.log("This is callee of IPC -- inner-communication process");
    console.log( "num1 + num2 = " + (num1 + num2));
}

Answer 34

// 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

Answer 35

У меня была такая же проблема. У меня были определенные функции внутри функции готовности документа jquery .

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

И эту функцию xyz () я вызвал в другом файле. Это не работает :) Вы должны определить функцию над готовым документом .

Вызов функции javascript в другом файле js

Ответы:

first.js

Second.js

index.html