मैं पेज लोड पर जावास्क्रिप्ट फ़ंक्शन कैसे कह सकता हूं?

244

परंपरागत रूप से, पृष्ठ लोड होने के बाद एक जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए, आप onloadशरीर में एक विशेषता जोड़ेंगे जिसमें जावास्क्रिप्ट का एक सा हिस्सा होगा (आमतौर पर केवल एक परीक्षण)

<body onload="foo()">

जब पृष्ठ लोड हो जाता है, तो मैं सर्वर से डेटा के साथ पृष्ठ के कुछ हिस्सों को गतिशील रूप से आबाद करने के लिए कुछ जावास्क्रिप्ट कोड चलाना चाहता हूं। onloadजब से मैं JSP अंशों का उपयोग कर रहा हूं, तब से मैं उस विशेषता का उपयोग नहीं कर सकता , जिसका कोई bodyतत्व नहीं है जिसे मैं एक विशेषता जोड़ सकता हूं।

क्या लोड पर जावास्क्रिप्ट फ़ंक्शन को कॉल करने का कोई अन्य तरीका है? मैं jQuery का उपयोग नहीं करूंगा क्योंकि मैं इससे बहुत परिचित नहीं हूं।

javascript onload

— palAlaa
स्रोत

15

btw: यह जावास्क्रिप्ट है; जावा एक भाषा और एक और जावास्क्रिप्ट है। जावा स्क्रिप्ट जैसी कोई चीज नहीं है। FYI करें

— यानिक रोचॉन

क्या आप या तो यह सत्यापित कर सकते हैं कि आपके प्रश्न से केविन का संपादन अभी भी वही प्रश्न पूछ रहा है, या यह सुनिश्चित करने के लिए कि हम इसे समझें? (क्या आप ऑनलोड का एक विकल्प खोजने की कोशिश कर रहे हैं?)

— STW

388

यदि आप ऑनलोड विधि को पैरामीटर लेना चाहते हैं, तो आप इसके समान कुछ कर सकते हैं:

window.onload = function() {
  yourFunction(param1, param2);
};

यह एक अनाम फ़ंक्शन को ऑन लोड करता है, कि जब आमंत्रित किया जाता है, तो आप जो भी पैरामीटर देते हैं, वह आपका वांछित फ़ंक्शन चलाएगा। और, ज़ाहिर है, आप अनाम फ़ंक्शन के अंदर से एक से अधिक फ़ंक्शन चला सकते हैं।

— मैट साइकर
स्रोत

और अब जब मैं गतिशील रूप से एक सर्वर-जनरेट किए गए पृष्ठ को शामिल कर रहा हूं और DOM-readiness की आवश्यकता है, तो मुझे इस माइनफील्ड के माध्यम से काम करने की आवश्यकता है। यदि केवल किसी ने ठीक से पुस्तकालय उपयोगकर्ता को प्रोत्साहित किया होगा।

— स्टीफन केंडल

4

मैंने यह नहीं कहा कि यह एक अच्छा विचार था। हालांकि लीड देव जहां मैं काम करता हूं उनमें Not Invented Here सिंड्रोम का एक मजबूत मामला है, और मैं कुछ पन्नों के बाहर, उन्हें jquery का उपयोग करने के लिए मना नहीं कर पाया।

— मैट सीकर

2

तब शायद आपको नौकरी स्विच करनी चाहिए। यदि नौकरी के लिए सही उपकरण आपके द्वारा उपयोग किए जाने वाले उपकरण नहीं है, तो अक्षमता से जूझ रहे दीवार के खिलाफ अपने सिर को क्यों हराया?

— स्टीफन केंडल

और क्या मैं बटन पर ऑनक्लिक ईवेंट का उपयोग करके दूसरी बार एक ही आपका कॉल कर सकता हूं?

— Faizan

73

ऐसा करने का एक और तरीका यह है कि आप श्रोताओं का उपयोग करके, यहाँ देखें कि आप उनका उपयोग कैसे करते हैं:

document.addEventListener("DOMContentLoaded", function() {
  you_function(...);
});

स्पष्टीकरण:

DOMContentLoaded इसका अर्थ है जब दस्तावेज़ के DOM ऑब्जेक्ट पूरी तरह से लोड होते हैं और जावास्क्रिप्ट द्वारा देखे जाते हैं, तो यह "क्लिक", "फ़ोकस" भी हो सकता है ...

फ़ंक्शन () अनाम फ़ंक्शन, ईवेंट होने पर लागू किया जाएगा।

— अहमद जोलानी
स्रोत

5

ध्यान दें कि यह IE 8 और लोअर में काम नहीं करेगा। अन्यथा यह सबसे अच्छा शुद्ध जेएस समाधान है!

— फिलिप

46

आपका मूल प्रश्न अस्पष्ट था, यह मानते हुए कि केविन का संपादन / व्याख्या सही है तो यह पहला विकल्प लागू नहीं होता है

विशिष्ट विकल्प onloadईवेंट का उपयोग कर रहा है :

<body onload="javascript:SomeFunction()">
....

आप शरीर के बहुत अंत में अपनी जावास्क्रिप्ट भी रख सकते हैं; यह डॉक पूरा होने तक क्रियान्वित नहीं होगा।

<body>
  ...
  <script type="text/javascript">
    SomeFunction();
  </script>
</body>

और, एक अन्य विकल्प, जेएस ढांचे का उपयोग करने पर विचार करना है जो आंतरिक रूप से ऐसा करता है:

// jQuery
$(document).ready( function () {
  SomeFunction();
});

— STW
स्रोत

javascript:में onloadअनावश्यक है, हानिकारक नहीं यद्यपि।

— icktoofay

@STW <script type="text/javascript">LoadResult();</script>देता हैUncaught ReferenceError: LoadResult is not defined

— Gunasegar

37

function yourfunction() { /* do stuff on page load */ }

window.onload = yourfunction;

या jQuery के साथ अगर आप चाहते हैं:

$(function(){
   yourfunction();
});

यदि आप पृष्ठ लोड पर एक से अधिक कार्य करना चाहते हैं, तो अधिक जानकारी के लिए इस लेख को देखें:

कई जावास्क्रिप्ट Onload कार्य का उपयोग करना

— सरफराज
स्रोत

3

यह सही नहीं है, फ़ंक्शन निष्पादित करेगा और उसे लोड करने पर जो भी रिटर्न देगा उसे असाइन करेगा। () नहीं होना चाहिए।

— epascarello

1

अगर वहाँ अन्य कार्यों कि onload घटना के लिए सुन रहे हैं यह उन्हें दूर उड़ा देगा। इवेंट हैंडलर को सीधे जोड़ने के बजाय एक इवेंट श्रोता को जोड़ना बेहतर है। यहां तक कि इस मामले में आप इसे फ़ंक्शन बंद किए बिना `window.onload = yourfunction 'के रूप में निर्दिष्ट करेंगे, न कि जिस तरह से आपके पास है। आपका तरीका असाइनमेंट के समय आपकी शिथिलता () को निष्पादित करना चाहता है।

— रोबस्टो

जब तक कि रिटर्न वैल्यू एक फंक्शन नहीं है, तब तक विंडो के लिए फंक्शन का रिटर्न वैल्यू काम करेगा।

— Idevries

@epascarello: फ़ंक्शन को नाम लिखते समय अच्छी पकड़, निश्चित, आपको एक आदत दिखाई देती है। धन्यवाद

— सरफराज

1

window.onload = yourfunction; इस तरह से समस्या यह है कि यह fucntion पैरामीटर को स्वीकार नहीं करता है !!

— पलला

8

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function codeAddress() {
            alert('ok');
        }
        window.onload = codeAddress;
        </script>
    </head>
    <body>
    
    </body>
</html>

स्निपेट का विस्तार करें

— गुमनाम
स्रोत

3

मुझे लगता है कि उसका उत्तर स्पष्ट है, जैसा कि आप देख सकते हैं कि स्क्रिप्ट को हेड टैग में रखा गया है, इस प्रकार इसे शरीर की सामग्री से पहले निष्पादित किया जा सकता है .. या मान लें कि इसके कार्यों को प्रीलोड किया जाए या जो भी हो .. कभी-कभी कोई व्यक्ति प्रश्न पूछता है क्योंकि वह डॉन है ' टी बिल्कुल भी नहीं जानते, लेकिन ऐसा कभी नहीं होता है कि कोई व्यक्ति आपको खिलाएगा, और न ही इस समुदाय में कोई भी, आपको खुद को थोड़ा और अधिक देखना होगा। # विशेष रूप

— से_चात_यौवे_आ_वेब_विकास

8

आपको उस फ़ंक्शन को कॉल करना होगा जिसे आप लोड (यानी दस्तावेज़ / पृष्ठ के लोड) पर कॉल करना चाहते हैं। उदाहरण के लिए, जिस फ़ंक्शन को आप लोड करना चाहते हैं जब दस्तावेज़ या पृष्ठ लोड को "yourFunction" कहा जाता है। यह दस्तावेज़ के लोड इवेंट पर फ़ंक्शन को कॉल करके किया जा सकता है। कृपया अधिक विवरण के लिए नीचे दिए गए कोड को देखें।

नीचे दिए गए कोड को आज़माएं:

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        yourFunction();
    });
    function yourFunction(){
      //some code
    }
</script>

— अमीर एमडी अमीरुज्जमां
स्रोत

6

यहाँ चाल है (हर जगह काम करता है):

r(function(){
alert('DOM Ready!');
});
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

— अभिषेक
स्रोत

1

DOM उपयोग में डाले गए लोड किए गए html (सर्वर से) का MutationObserverपता लगाने के लिए या डेटा लोड करने के लिए तैयार होने पर अपने लोडकंटेंट फ़ंक्शन में क्षण का पता लगाएं

कोड स्निपेट दिखाएं

let ignoreFirstChange = 0;
let observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirstChange++ > 0) console.log('Element added on', new Date());
}
)).observe(content, {childList: true, subtree:true });


// TEST: simulate element loading
let tmp=1;
function loadContent(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadContent('Senna');
loadContent('Anna');
loadContent('John');

<div id="content"><div>

स्निपेट का विस्तार करें

— कामिल कीलवेज़्स्की
स्रोत