Ik wilde een functie aanroepen die is gedefinieerd in een first.js-bestand in second.js-bestand. Beide bestanden zijn gedefinieerd in een HTML-bestand zoals:
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
Ik wil fn1()aanroepen die is gedefinieerd in first.jsin second.js. Uit mijn zoekopdrachten bleek dat als first.jsals eerste is gedefinieerd, dit mogelijk is, maar uit mijn tests heb ik geen manier gevonden om dat te doen.
Hier is mijn code:
second.js
document.getElementById("btn").onclick = function() {
fn1();
}
first.js
function fn1() {
alert("external fn clicked");
}
Antwoord 1, autoriteit 100%
Een functie kan niet worden aangeroepen tenzij deze is gedefinieerd in hetzelfde bestand of een functie die is geladen voordat de poging werd gedaan om deze aan te roepen.
Een functie kan niet worden aangeroepen tenzij deze zich in hetzelfde of een groter bereik bevindt dan degene die hem probeert aan te roepen.
Je declareert functie fn1in first.js, en dan in tweede kun je gewoon fn1();
hebben
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>
Antwoord 2, Autoriteit 14%
1st JS:
function fn(){
alert("Hello! Uncle Namaste...Chalo Kaaam ki Baat p Aate h...");
}
2e JS:
$.getscript("url or name of 1st Js File",function(){
fn();
});
Ik hoop dat dit helpt …
Happy Codering.
Antwoord 3, Autoriteit 13%
U kunt de functie een globale variabele maken in first.js
En bekijk sluiting en doe het niet in document.readyZet het buiten
U kunt ook Ajax gebruiken
$.ajax({
url: "url to script",
dataType: "script",
success: success
});
Op dezelfde manier kunt u jQuery getstcript
gebruiken
$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
});
Antwoord 4, Autoriteit 10%
U kunt overwegen om de ES6-import-exportsyntaxis te gebruiken. In bestand 1;
export function f1() {...}
en vervolgens in bestand 2;
import { f1 } from "./file1.js";
f1();
Houd er rekening mee dat dit alleen werkt als u <script src="./file2.js" type="module">
gebruikt
Je hebt geen twee scripttags nodig als je het op deze manier doet. Je hebt alleen het hoofdscript nodig en je kunt al je andere dingen daar importeren.
Antwoord 5, autoriteit 4%
Het zou als volgt moeten werken:
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>
uitvoer
Probeer dit CodePen-fragment: link.
Antwoord 6, autoriteit 3%
Let op: dit werkt alleen als de
<script>
tags zitten in het lichaam en NIET in het hoofd.
Dus
<head>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
=> onbekende functie fn1()
Mislukt en
<body>
...
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
</body>
werkt.
Antwoord 7, autoriteit 2%
declareer functie in globaal bereik met venster
first.js
window.fn1 = function fn1() {
alert("external fn clicked");
}
second.js
document.getElementById("btn").onclick = function() {
fn1();
}
op deze manier opnemen
<script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>
Antwoord 8, autoriteit 2%
Gebruik cache als uw server dit toestaat om de snelheid te verbeteren.
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
}
En gebruik het dan als volgt:
ext('somefile.js',()=>
myFunc(args)
);
Maak er eventueel een prototype van om het flexibeler te maken. Zodat je niet elke keer het bestand hoeft te definiëren, als je een functie aanroept of als je code uit meerdere bestanden wilt halen.
Antwoord 9, autoriteit 2%
first.js
function first() { alert("first"); }
Tweede.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>
Antwoord 10
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
});
Antwoord 11
gebruik “var” tijdens het maken van een functie, dan kun je die openen vanuit een ander bestand. zorg ervoor dat beide bestanden goed zijn verbonden met uw project en toegang tot elkaar hebben.
file_1.js
var firstLetterUppercase = function(str) {
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
return str;
}
toegang tot deze functie/variabele vanuit het bestand file_2.js
firstLetterUppercase("gobinda");
uitvoer => Gobinda
ik hoop dat dit iemand zal helpen, veel plezier met coderen !!!
Antwoord 12
Dit komt eigenlijk heel laat, maar ik dacht dat ik het moest delen,
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()
Antwoord 13
Mijn idee is om twee JavaScript-aanroepen te laten functioneren via DOM.
De manier om het te doen is eenvoudig…
We hoeven alleen de verborgen js_ipc html-tag te definiëren.
Nadat de opgeroepene zich heeft geregistreerd, klikt u op de verborgen js_ipc-tag en vervolgens:
De beller kan de click-gebeurtenis verzenden om de belle te activeren.
En het argument is opgeslagen in het geval dat u wilt slagen.
Wanneer moeten we bovenstaande manier gebruiken?
Soms is de twee javascript-code erg ingewikkeld om te integreren en zoveel asynchrone code daar. En verschillende code gebruiken verschillende frameworks, maar je moet nog steeds een eenvoudige manier hebben om ze samen te integreren.
Dus in dat geval is het niet gemakkelijk om het te doen.
In de implementatie van mijn project kom ik deze casus tegen en het is erg ingewikkeld om te integreren. En uiteindelijk kwam ik erachter dat we twee javascripts elkaar kunnen laten bellen via DOM.
Ik demonstreer dit op deze manier in deze git-code. zo kom je er wel doorheen. (Of lees het van https://github.com/milochen0418/javascript-ipc-demo)
git clone https://github.com/milochen0418/javascript-ipc-demo
cd javascript-ipc-demo
git checkout 5f75d44530b4145ca2b06105c6aac28b764f066e
Overal, hier probeer ik het uit te leggen aan de hand van het volgende eenvoudige geval. Ik hoop dat deze manier je kan helpen om twee verschillende javascript-code gemakkelijker dan voorheen te integreren. Er is geen JavaScript-bibliotheek om communicatie te ondersteunen tussen twee javascript-bestanden die door een ander team zijn gemaakt.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="js_ipc" style="display:none;"></div>
<div id="test_btn" class="btn">
<a><p>click to test</p></a>
</div>
</body>
<script src="js/callee.js"></script>
<script src="js/caller.js"></script>
</html>
En de code
css/style.css
.btn {
background-color:grey;
cursor:pointer;
display:inline-block;
}
js/caller.js
function caller_add_of_ipc(num1, num2) {
var e = new Event("click");
e.arguments = arguments;
document.getElementById("js_ipc").dispatchEvent(e);
}
document.getElementById("test_btn").addEventListener('click', function(e) {
console.log("click to invoke caller of IPC");
caller_add_of_ipc(33, 22);
});
js / callee.js
document.getElementById("js_ipc").addEventListener('click', (e)=>{
callee_add_of_ipc(e.arguments);
});
function callee_add_of_ipc(arguments) {
let num1 = arguments[0];
let num2 = arguments[1];
console.log("This is callee of IPC -- inner-communication process");
console.log( "num1 + num2 = " + (num1 + num2));
}
Antwoord 14
beter laat dan nooit
(function (window) {const helper = { fetchApi: function () { return "oke"}
if (typeof define === 'function' && define.amd) {
define(function () { return helper; });
}
else if (typeof module === 'object' && module.exports) {
module.exports = helper;
}
else {
window.helper = helper;
}
}(window))
Index HTML
<script src="helper.js"></script>
<script src="test.js"></script>
in test.js-bestand
helper.fetchApi()
Antwoord 15
Ik heb hetzelfde probleem gehad. Ik heb gedefinieerd functies binnen jQuery Document Ready -functie.
$(document).ready(function() {
function xyz()
{
//some code
}
});
en deze functie XYZ () Ik heb in een ander bestand gebeld. Dit werkt niet 🙂 Je moet de functie hierboven documenteren .
Antwoord 16
// module.js
export function hello() {
return "Hello";
}
// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";
verwijzing van https://hype.codes/how-include -js-bestand-een ander-js-bestand