別のjsファイルでJavaScript関数を呼び出す

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 2014
1
私たちは皆、これを1日に1000回行っています。それができない場合は、first.jsに問題があるはずです。ブラウザにロードされているかどうかを確認し、ロードされている場合は、構文解析中に構文エラーが発生したかどうかを確認してください（どちらも開発者のツールバーに表示されます）ブラウザの）
— rplantiko '21 / 09/21
2
うまくいくはずです。質問を編集して、ChromeまたはFirefox / FirebugのJavaScriptコンソールを使用してこれを実行するとどうなるかを教えてください。（ええと、関数名のスペルが正しいことを確認してください。）
— Bob Brown
2
それがうまくいかない場合、私はあなたが何か間違ったことをしていると思います。あなたの質問の情報を考えると、それが望んでいることは不可能です。
— Felix Kling 2014
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
それで、本番アプリケーションでこれをすべて管理するための最良の方法は何ですか？
— コスタ
18
これは私にはうまくいきません。fn1（）が定義されていないというエラーが発生する
— Aayushi
10
これも私にはうまくいきません。jquery getscriptを使用する以外の回避策はありますか？
— Vandolph Reyes 2017
14
それが実際に機能しないのに、なぜ82票で受け入れられた回答なのですか？
— ダニエル
26
これでうまくいかない場合は、他の何かの中で関数を定義している可能性があります。たとえば、$(document).ready(function() {...})ブロック内に機能があり、機能しませんでした。私はそれを動かしました、そしてそれは魅力のように働きました。
— マイケルジラック2018
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." );
});
— Gildas.Tambo
ソース
7
初心者は決してこのようなことをしようとはしません。これらは避けるべき悪い習慣です。両方がウェブページで参照されている限り、はい。同じJSファイルにあるかのように関数を呼び出すだけです。
— アナンダ
唯一の問題は、何らかの理由でヘッダーが含まれていないことです。
— Si8 2017年
21

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

これがお役に立てば幸い...ハッピーコーディング。

— Akshay Tyagi
ソース
2
私はあなたが意味していると思いますjQuery.getScript()
— Pmpr 2018
16

es6 import export構文の使用を検討できます。ファイル1;

export function f1() {...}

そして、ファイル2にあります。

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

これはあなたが使用している場合にのみ機能することに注意してください <script src="./file2.js" type="module">

この方法で行う場合、2つのスクリプトタグは必要ありません。メインスクリプトが必要なだけで、他のすべてのものをそこにインポートできます。

— tm2josep
ソース
サファリでは、私が取得cross-origin script load denied by cross-origin resource sharing policy
— kakyo
古いブラウザでは、es6インポート構文を使用できない場合があります。それはあなたのためにそれが簡単になれば、あなたはバベルを使用することができます。
— 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スニペットを試してください：リンク。

— コンスタゴルガン
ソース
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>

動作します。

— user213979
ソース
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>
— アフサル
ソース
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
— 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>
— タウフィチャイタリ
ソース
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");

出力=> Gobinda

これが誰か、幸せなコーディングに役立つことを願っています!!!

— iNandi
ソース
-2

同じ問題がありました。私はjquery ドキュメントレディ関数内に関数を定義しました。

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

そして、この関数xyz（）を別のファイルで呼び出しました。これは機能しません:)上記のドキュメントの関数を定義する必要があります。

— メルド
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.