다른 js 파일에서 자바 스크립트 함수 호출

141

second.js 파일의 first.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

작동합니다. Chrome 또는 Firefox / Firebug의 JavaScript 콘솔을 사용하여이 작업을 실행할 때 발생하는 문제를 알려주려면 질문을 편집하십시오. (음, 함수 이름의 철자가 올바른지 확인하십시오.)

— Bob Brown

2

작동하지 않으면 뭔가 잘못한 것 같습니다. 귀하의 질문에 정보가 주어지면 그것을 원한다는 것은 불가능합니다.

— Felix Kling

2

실제 코드 여야합니다.

— epascarello

164

동일한 파일에 정의되어 있지 않거나 호출하기 전에로드 된 함수가 아니면 함수를 호출 할 수 없습니다.

함수가 호출하려는 범위와 같거나 더 큰 범위에 있지 않으면 함수를 호출 할 수 없습니다.

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

프로덕션 애플리케이션에서이 모든 것을 관리하는 가장 좋은 방법은 무엇입니까?

— Costa

18

이것은 나를 위해 작동하지 않습니다. fn1 ()이 정의되지 않았다는 오류가 발생합니다

— Aayushi

10

이것은 나에게도 효과가 없습니다. jquery getscript를 사용하는 것이 좋지 않은 연습을 제안하는 것 외에는 해결 방법이 있습니까?

— Vandolph Reyes

14

이것이 실제로 작동하지 않는 경우 왜 82 표로 허용되는 답변입니까?

— 다니엘

26

이것이 효과가 없다면 다른 기능을 정의했을 가능성이 있습니다. 예를 들어, $(document).ready(function() {...})블록 내에서 기능을 수행 했지만 작동하지 않았습니다. 나는 그것을 옮겼고 그것은 매력처럼 작동했습니다.

— Michael Ziluck

23

함수를 전역 변수로 first.js 만들고 클로저를 살펴보고 document.ready외부 에 넣지 마십시오.

아약스도 사용할 수 있습니다

    $.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 파일에있는 것처럼 함수를 호출하기 만하면됩니다.

— Ananda

유일한 문제는 어떤 이유로 든 헤더를 포함하지 않는다는 것입니다.

— Si8

21

첫 번째 JS :

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

두 번째 JS :

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

이것이 도움이 되길 바란다 ... 행복한 코딩.

— Akshay Tyagi
소스

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 코드 조각을 사용해보십시오 : link .

— 콘 스타 고간
소스

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>

공장.

— 사용자
소스

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>

— Afsar
소스

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

— 이샤 크 유수프
소스

질문에서 OP의 의견을 참조하십시오 : "... 같은 이름의 잘못된 위치에있는 파일을 실험하고있었습니다 ..."

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

출력 => 고빈다

이것이 누군가에게 도움이되기를 바랍니다.

— 이난 디
소스

-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 () 는 다른 파일에서 호출했습니다. 이것은 작동하지 않습니다 :) document ready 위에 함수를 정의해야합니다 .

— 멜도
소스