IT story

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

hot-time 2020. 8. 2. 17:18
반응형

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

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

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

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

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>

함수를 전역 변수로 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." );
});

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

이것이 도움이되기를 바랍니다 ... 행복한 코딩.

다음과 같이 작동합니다.

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

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>

서버에서 속도를 향상시킬 수있는 경우 캐시를 사용하십시오. 

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

선택적으로 프로토 타입을 만들어 더 유연하게 만듭니다. 따라서 함수를 호출하거나 여러 파일에서 코드를 가져 오려고 할 때마다 파일을 정의 할 필요가 없습니다.

이 경우에만 작동합니다 

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

공장.

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

You could consider using the es6 import export syntax. In file 1;

export function f1() {...}

And then in file 2;

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

Please note that this only works if you're using <script src="./file1.js" type="module">

You will not need two script tags if you do it this way. You simply need the main script, and you can import all your other stuff there.

This is actually coming very late, but I thought I should share,

in index.html

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

in 1.js

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

in 2.js

fn1()

declare function in global scope with window

first.js

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

second.js

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

include like this

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

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

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

reference from https://hype.codes/how-include-js-file-another-js-file

I have had same problem. I have had defined functions inside jquery document ready function.

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

And this function xyz() I have called in another file. This doesn't working :) You have to defined function above document ready.

참고URL : https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file

반응형

'IT story' 카테고리의 다른 글

2 차원 배열을 할당하는 이상한 방법?  (0) 2020.08.02
사제 및 술통 전용 종속성 이해  (0) 2020.08.02
내장 파이썬 함수의 소스 코드를 찾으십니까?  (0) 2020.08.02
Javadoc을 사용하여 @um 값에 연결하는 방법  (0) 2020.08.02
수동 배포와 Amazon Elastic Beanstalk  (0) 2020.08.02

'IT story'의 다른글

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

관련글

댓글

티스토리툴바