Подтвердить что ты не робот

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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>

выход

Output. Button + Result

Попробуйте этот фрагмент CodePen: ссылка.

Ответ 5

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>

Ответ 6

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

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

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

Ответ 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>

работает.

Ответ 8

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

export function f1() {...}

А потом в файле 2;

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

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

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

Ответ 9

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

Ответ 10

Node.js

В настоящее время Node.js использует систему module.exports/require. Вы можете использовать babel для переноса, если вы хотите использовать синтаксис импорта.

// mymodule.js
exports.hello = function() {
  return "TCS";
}

// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "TCS"

Ответ 11

Поможет ли вызов функции из события onload тега body onload = "fn1(); fn2();" ?

Ответ 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()

Ответ 13

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

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>

Ответ 15

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

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

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