Başka bir js dosyasında javascript işlevi çağırma

142

Second.js dosyasındaki first.js dosyasında tanımlanan bir işlevi çağırmak istedim. her iki dosya da aşağıdaki gibi bir HTML dosyasında tanımlanır:

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

Ben çağrı istiyorum fn1()tanımlanan first.jsyer second.js. Aramalarımdan cevaplar first.jsilk önce tanımlanmışsa mümkün oldu, ancak testlerimden bunu yapmanın bir yolunu bulamadım.

İşte benim kod:

second.js

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

first.js

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

javascript html

— m0j1
kaynak

6

Öyleyse, küresel kapsamda olduğu sürece özel bir şey yok.

— epascarello

1

Bunu günde binlerce kez yapıyoruz. Yapamıyorsanız, first.js'nizle ilgili bir sorun olmalıdır: Tarayıcınıza hiç yüklenip yüklenmediğini ve evet ise, ayrıştırırken sözdizimi hatası olup olmadığını kontrol edin (her ikisi de geliştiricinin araç çubuğunda görülebilir) tarayıcınızın)

— rplantiko

2

Bu işe yaramalı. Lütfen Chrome veya Firefox / Firebug'daki JavaScript konsolunu kullanarak bunu çalıştırdığınızda bize ne olacağını bildirmek için sorunuzu düzenleyin. (Hım, ve fonksiyon adını doğru yazdığınızdan emin olun.)

— Bob Brown

2

Eğer işe yaramazsa, sanırım yanlış bir şey yapıyorsunuzdur. Sorunuzdaki bilgiler göz önüne alındığında, olmasını istemek imkansız.

— Felix Kling

2

Gerçek kod gerekir.

— epascarello

164

Bir işlev aynı dosyada tanımlanmadığı veya çağrılmadan önce yüklenen bir işlev olmadığı sürece çağrılamaz.

Bir işlev, çağrılmaya çalışılan işlevle aynı veya daha büyük kapsamda olmadıkça çağrılamaz.

fn1First.js'de işlev bildirirsiniz ve sonra saniyedefn1();

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>

— Fernando Mendez
kaynak

4

Tüm bunları bir üretim uygulamasında yönetmenin en iyi yolu nedir?

— Costa

18

bu benim için işe yaramıyor. Fn1 () gibi tanımlanmıştır ilişkin bir hata verir

— Aayushi

10

Bu benim için de işe yaramıyor. Kötü bir uygulama önermek jquery getscript kullanmak dışında herhangi bir çalışma var mı?

— Vandolph Reyes

14

Bu gerçekten işe yaramazsa neden 82 oyla kabul edilen cevap?

— Daniel

26

Bu sizin için işe yaramıyorsa, işlevi başka bir şey içinde tanımlamış olursunuz. Örneğin, bir $(document).ready(function() {...})blok içinde benim fonksiyonum vardı ve işe yaramadı. Ben taşındı ve bir cazibe gibi çalıştı.

— Michael Ziluck

23

İşlevi global bir değişken haline getirebilir ve kapanışafirst.js bakabilir ve dışarıya koymayındocument.ready

ajax'ı da kullanabilirsiniz

    $.ajax({
      url: "url to script",
      dataType: "script",
      success: success
    });

jquery getScript'i kullanabilirsiniz

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

— Gildas.Tambo
kaynak

7

Yeni başlayanlar asla böyle bir şey yapmaya çalışmazlar. Bunlar kaçınılması gereken kötü uygulamalardır. Her ikisi de web sayfası tarafından referans verildiği sürece, evet. İşlevleri aynı JS dosyasındaymış gibi çağırmanız yeterlidir.

— Ananda

Tek sorun, herhangi bir nedenle üstbilgiyi içermemesidir.

— Si8

21

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

Umarım bu yardımcı olur ... Mutlu kodlama.

— Akshay Tyagi
kaynak

2

Sanırım demek istiyorsunjQuery.getScript()

— Pmpr

16

Es6 içe aktarma dışa aktarma sözdizimini kullanmayı düşünebilirsiniz. Dosya 1'de;

export function f1() {...}

Ve sonra dosya 2'de;

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

Lütfen bunun yalnızca <script src="./file2.js" type="module">

Bu şekilde yaparsanız iki komut dosyası etiketine ihtiyacınız yoktur. Sadece ana komut dosyasına ihtiyacınız var ve diğer tüm öğelerinizi oraya aktarabilirsiniz.

— tm2josep
kaynak

Safari ile, ben olsuncross-origin script load denied by cross-origin resource sharing policy

— kakyo

Daha eski tarayıcılarda es6 içe aktarma sözdizimini kullanamayabilirsiniz. Eğer sizin için kolaylaştırırsa Babel'i kullanabilirsiniz.

— tm2josep

5

Bu şekilde çalışmalıdır:

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>

çıktı

Bu CodePen snippet: bağlantısını deneyin .

— Consta Gorgan
kaynak

4

Lütfen bunun yalnızca

<script>

Etiketler vücuttadır ve kafada DEĞİLDİR.

Yani

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

=> bilinmeyen işlev fn1 ()

Başarısız ve

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

İşler.

— user213979
kaynak

3

Sunucunuz hızı artırmasına izin veriyorsa önbellek kullanın.

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
}

Ve sonra böyle kullanın:

ext('somefile.js',()=>              
    myFunc(args)
);

İsteğe bağlı olarak, daha esnek olması için bir prototip yapın. Böylece, bir işlevi çağırırsanız veya birden çok dosyadan kod almak istiyorsanız, dosyayı her seferinde tanımlamanız gerekmez.

— Thielicious
kaynak

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>

— Afşar
kaynak

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
kaynak

Kod snippet'iniz sorunu çözebilse de, kodunuzun amacının ne olduğunu (sorunu nasıl çözdüğünü) açıklamanız gerekir. Ayrıca, stackoverflow.com/help/how-to-answer

— Ahmad F

2

global kapsamda pencere ile fonksiyon bildirme

first.js

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

second.js

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

böyle dahil et

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

— taoufiqaitali
kaynak

1

Bu aslında çok geç geliyor, ama paylaşmam gerektiğini düşündüm,

index.html

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

1.js içinde

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

2.js içinde

fn1()

— İshaq Yusuf
kaynak

Lütfen OP'nin "... ... sadece aynı ada sahip yanlış bir konumda bulunan bir dosyayı [... ile" deniyordum.

— traktor53

1

işlev oluştururken "var" kullanın, daha sonra buna başka bir dosyadan erişebilirsiniz. her iki dosyanın da projenize iyi bağlandığından ve birbirlerine erişebildiğinden emin olun.

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

Bu işleve / değişken form dosyasına erişme file_2.js dosyası

firstLetterUppercase("gobinda");

output => Gobinda

Umarım bu birine yardımcı olur, mutlu kodlama !!!

— iNandi
kaynak

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

— Min Thant
kaynak

-2

Aynı problemim vardı. Jquery belge hazır işlevi içinde tanımlanmış işlevleri vardı .

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

Ve bu işlevi xyz () başka bir dosyada aradım. Bu işe yaramıyor :) Yukarıdaki belgeye hazır fonksiyonu tanımlamanız gerekiyor .

— Meldo
kaynak