मैं इलेक्ट्रॉन में एक मूल पृष्ठ नेविगेशन बनाने की कोशिश कर रहा हूं।

इलेक्ट्रॉन एपीआई डेमो में आयात का उपयोग उस उद्देश्य के लिए किया जाता है (जहाँ तक मैं समझ सकता हूँ) यह)। आयात के संबंध में मुझे यह जानकारी मिली कि इसे हटा दिया गया था और इसे फरवरी 2020 में Chrome से हटाया गया था।< बीआर/> एक विकल्प के रूप में, नोड-मॉड्यूल fs का उपयोग किया जा सकता है। मेरी समस्या: स्क्रिप्ट लोड नहीं होती हैं।

सामग्री और संलग्न जावास्क्रिप्ट को एक div में लोड करने का सबसे अच्छा तरीका क्या है?

जीथब कोड:

@Entertain की मदद से समस्या का समाधान हो सका। मैंने गिट-रेपो अपडेट किया है।

0
Amaroks 21 सितंबर 2020, 14:10

1 उत्तर

सबसे बढ़िया उत्तर

ठीक है, सबसे पहले, हम गतिशील डोम तत्वों के साथ काम कर रहे हैं। इसका मतलब है कि addEventListener का मूल्यांकन एक बार किया जाता है और आपके द्वारा अपने DOM में गतिशील रूप से नए तत्व जोड़ने के बाद, इसे लागू नहीं किया जाएगा। आपके winController.js में यह समाधान मदद करेगा:

// Hello.addEventListener("click", function () {
//   loadPage("./assets/html/Hello.html", "content");
// });

// Info.addEventListener("click", function () {
//   loadPage("./assets/html/Info.html", "content");
// });

// This implementation doesn't care whether an element with the given id exists
document.addEventListener('click', function (e) {
  if (e.target && e.target.id == 'Hello') {
    loadPage('./assets/html/Hello.html', 'content');
  } else if (e.target && e.target.id == 'Info') {
    loadPage('./assets/html/Info.html', 'content');
  }
});

इसके बाद export को अपनी functions.js फ़ाइल से हटा दें, इसकी आवश्यकता नहीं है:

function thanks() {
  alert('Thanks');
}

केवल एक चीज बची है, और वह सबसे महत्वपूर्ण है, यह अपडेट करना है कि हम functions.js फ़ाइल को गतिशील रूप से कैसे लोड करते हैं:

<!-- <script type="module" src="../js/functions.js"></script> -->
<script type="module">
  let script = document.createElement('script');
  script.src = './assets/js/functions.js';
  document.head.append(script);
  
  // function thanks() {
  //     alert("Thanks");
  //   }
  Say.addEventListener('click', function () {
    thanks();
  });
</script>

और बस इतना ही, इस बदलाव के बाद आपका अलर्ट सक्रिय होना चाहिए!

संपादित करें: कृपया अपने Hello.Html का नाम बदलकर Hello.html कर दें, या भविष्य में आगे की गलतियों को रोकने के लिए इवेंट बेहतर ढंग से सब कुछ लोअरकेस में लिखें: hello.html और info.html .

सूचना: आपकी Info.html फ़ाइल में आपके बटन की आईडी गलत है:

<!-- <button type="submit" class="btn btn-success btn-lg mt-2" id="Info"> -->
<button type="submit" class="btn btn-success btn-lg mt-2" id="Hello">
  Jump to Hello
</button>
1
Entertain 23 सितंबर 2020, 14:49