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

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

답변

es6 가져 오기 내보내기 구문 사용을 고려할 수 있습니다. 파일 1에서;

export function f1() {...}

그리고 파일 2에서;

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

사용중인 경우에만 작동합니다. <script src="./file2.js" type="module">

이렇게하면 두 개의 스크립트 태그가 필요하지 않습니다. 당신은 단순히 메인 스크립트가 필요하며, 다른 모든 것을 가져올 수 있습니다.

답변

다음과 같이 작동합니다.

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 .

답변

이 경우에만 작동합니다 

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

공장.

답변

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

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

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