पेज लोड होने पर फंक्शन कैसे चलाएं?

246

पेज लोड होने पर मैं फंक्शन चलाना चाहता हूं, लेकिन मैं इसे <body>टैग में इस्तेमाल नहीं करना चाहता ।

मेरे पास एक स्क्रिप्ट है जो अगर मैं इसे इनिशियलाइज़ करता हूं, तो यह <body>इस प्रकार है:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

लेकिन मैं इसे बिना चलाना चाहता हूं <body onload="codeAddress()">और मैंने बहुत सी चीजों की कोशिश की है, जैसे:

window.onload = codeAddress;

लेकिन यह काम नहीं कर रहा है।

जब पृष्ठ लोड किया जाता है तो मैं इसे कैसे चलाऊं?

javascript html onload

— गुस्तावसन का दावा है
स्रोत

क्या आप परिभाषित window.onload = codeAddressहोने के बाद चल रहे हैं codeAddress()? यदि हां, तो यह काम करना चाहिए। क्या आप सुनिश्चित हैं कि कहीं और कोई त्रुटि नहीं है?

— Skilldrick

इसका कोई मतलब नहीं है। window.onload पेज लोड होने के बाद चलता है और सभी जावास्क्रिप्ट उपलब्ध है, इसलिए कोडएड्रेस () फ़ंक्शन को पेज या लिंक की गई जेएस फाइलों के भीतर कहीं भी घोषित किया जा सकता है। जब तक इसे पेज लोड के दौरान नहीं बुलाया जाता, तब तक इसे पहले नहीं आना होगा।

— जारेड फरिश

@ जेरेड हाँ यह करता है। Jsfiddle.net/HZHmc पर एक नज़र डालें । यह काम नहीं करता है। लेकिन अगर आप परिभाषा के बाद window.onload को स्थानांतरित करते हैं: jsfiddle.net/HZHmc/1 यह काम करता है।

— Skilldrick

एक फ़ंक्शन घोषणा आमतौर पर दायरे के शीर्ष पर फहराया जाता है, इसलिए फ़ंक्शन को एक सुलभ दायरे में कहीं भी घोषित किया जा सकता है।

— रस कैम

4

सभी लोकप्रिय ब्राउज़र्स जावास्क्रिप्ट त्रुटियों को प्रदर्शित कर सकते हैं - क्या आपको कोई मिलता है?

— क्रिस्टोफ

354

window.onload = codeAddress;काम करना चाहिए - यहाँ एक डेमो है , और पूर्ण कोड:

<!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>

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

<!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');
        }
        
        </script>
    </head>
    <body onload="codeAddress();">
    
    </body>
</html>

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

— डारिन दिमित्रोव
स्रोत

3

जैसा कि मैंने अपने जवाब में कहा, कोड के साथ कुछ भी गलत नहीं है जैसा कि देखा गया है - इसका कारण यह नहीं है कि जेएस में कहीं न कहीं त्रुटि होनी चाहिए।

— Skilldrick

यदि आप शरीर में पाठ के साथ एक पैराग्राफ लगाते हैं, तो यह तब तक लोड नहीं होगा जब तक आप ठीक क्लिक नहीं करते।

— प्रतिदीप्तग्रीन 5

यह वैश्विक ईवेंट हैंडलर केवल क्रोम में उपलब्ध है। developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

— Devappended

177

JQuery या window.onload का उपयोग करने के बजाय, देशी जावास्क्रिप्ट ने jQuery के रिलीज़ होने के बाद से कुछ महान कार्यों को अपनाया है। सभी आधुनिक ब्राउज़रों में अब jQuery लाइब्रेरी के उपयोग के बिना अपना स्वयं का DOM तैयार फ़ंक्शन है।

यदि आप देशी जावास्क्रिप्ट का उपयोग करते हैं तो मैं इसकी सलाह दूंगा।

document.addEventListener('DOMContentLoaded', function() {
    alert("Ready!");
}, false);

— स्पेंसर मई
स्रोत

4

(noob सवाल: क्या करता falseहै?)

— question

7

@ '' बुलबुले 'की संपत्ति के लिए (जिसमें आपको शामिल करने की आवश्यकता नहीं है, मैं सिर्फ अच्छी आदत के लिए सभी बुलियन में भरता हूं)। 'रद्द करने योग्य' संपत्ति के लिए एक और बूलियन बयान भी है, लेकिन यह बहुत उपयोगी नहीं है क्योंकि उपरोक्त कथन पहले से ही रद्द नहीं है। इसके बारे में और अधिक पढ़ें: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— Spencer May

1

यह वही है जो मैं अभी देख रहा था :) डोम पूरा होने पर निष्पादित करें, इसलिए आप इसे हेरफेर कर सकते हैं, न कि जब ब्राउज़र कहता है "पेज पूरी तरह से लोड है", जो बाहरी सामान (जैसे विज्ञापन) के आधार पर कई सेकंड ले सकता है

— नाथनियल

थोड़ा नॉब सवाल, क्या होगा अगर आप नहीं जानते कि पेज लोड हुआ है या नहीं? संपादित करें: आह: document.readyState

— ब्रायन हैने

1

@ x- यूरी "DOMContentLoaded घटना को निकाल दिया गया है जब दस्तावेज़ को पूरी तरह से लोड और पार्स किया गया है, लोडिंग खत्म करने के लिए स्टाइलशीट, छवियों और सबफ़्रेमियों का इंतजार किए बिना (लोड घटना को पूरी तरह से लोड किए गए पृष्ठ का पता लगाने के लिए इस्तेमाल किया जा सकता है)।" - stackoverflow.com/questions/2414750/…

— स्पेंसर मई

46

डारिन का जवाब लेकिन jQuery की शैली लेना। (मुझे पता है कि उपयोगकर्ता ने जावास्क्रिप्ट के लिए कहा था)।

भागना

$(document).ready ( function(){
   alert('ok');
});

— Joes पर खाओ
स्रोत

4

आपके उत्तर ने मुझे अलॉट किया, लेकिन jQuery / जावास्क्रिप्ट के बारे में नहीं।

— यूनिकॉर्न 2

2

@ वीजयकुमार यह jQuery है, देशी जावास्क्रिप्ट नहीं है इसलिए आपको काम करने के लिए इसमें शामिल एक jQuery लाइब्रेरी की आवश्यकता है

— स्पेंसर मई

30

वैकल्पिक समाधान। मैं संक्षिप्तता और कोड सरलता के लिए इसे पसंद करता हूं।

(function () {
    alert("I am here");
})();

यह एक अनाम फ़ंक्शन है, जहां नाम निर्दिष्ट नहीं है। यहाँ क्या होता है, फ़ंक्शन परिभाषित होता है और एक साथ निष्पादित होता है। इसे शरीर की शुरुआत या अंत में जोड़ें, यह निर्भर करता है कि क्या यह पृष्ठ लोड करने से पहले निष्पादित किया जाना है या जल्द ही सभी HTML तत्व लोड होने के बाद।

— हबीब
स्रोत

1

यह एकमात्र कोड है जो GitHub के लिए HTML पूर्वावलोकन के साथ काम करता है: HTMLpreview.github.io अन्य कोड, जबकि सही, इस HTML पूर्वावलोकन द्वारा बर्बाद हो गया है।

— जेसन डौकेट

1

क्या कोई समझा सकता है कि यह HTML पृष्ठ के अंत में स्क्रिप्ट टैग लगाने और अनाम फ़ंक्शन के उद्देश्य से कैसे भिन्न है?

— पैट-लाफ

10

window.onload = function() { ... आदि एक महान जवाब नहीं है।

यह काम करने की संभावना है, लेकिन यह उस घटना के लिए पहले से ही किसी अन्य कार्य को भी तोड़ देगा। या, यदि कोई अन्य फ़ंक्शन आपके बाद उस ईवेंट में हुक करता है, तो यह आपका टूट जाएगा। इसलिए, आप बहुत समय बाद यह पता लगाने की कोशिश कर सकते हैं कि जो कुछ काम कर रहा था वह अब क्यों नहीं है।

एक और अधिक मजबूत जवाब यहाँ:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

कुछ कोड जो मैं उपयोग कर रहा हूं, मैं भूल जाता हूं कि मुझे लेखक को क्रेडिट देने के लिए कहां मिला था।

function my_function() {
    // whatever code I want to run after page load
}
if (window.attachEvent) {window.attachEvent('onload', my_function);}
else if (window.addEventListener) {window.addEventListener('load', my_function, false);}
else {document.addEventListener('load', my_function, false);}

उम्मीद है की यह मदद करेगा :)

— मर्जी
स्रोत

onloadउपयोग में अतिरिक्त जानकारी प्रदान करने के लिए धन्यवाद

— CybeX

4

रीडिस्ट्रेटचेंज को आज़माएं

document.addEventListener('readystatechange', () => {    
  if (document.readyState == 'complete') codeAddress();
});

जहां राज्य हैं:

लोड हो रहा है - दस्तावेज़ लोड हो रहा है (स्निपेट में निकाल नहीं दिया गया है)
इंटरेक्टिव - दस्तावेज़ को पार्स किया गया, पहले निकाल दिया गयाDOMContentLoaded
पूर्ण - दस्तावेज़ और संसाधनों को लोड किया जाता है, पहले निकाल दिया जाता हैwindow.onload

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

<script>
  document.addEventListener("DOMContentLoaded", () => {
    mydiv.innerHTML += `DOMContentLoaded (timestamp: ${Date.now()})</br>`;
  });
  
  window.onload = () => {
    mydiv.innerHTML += `window.onload (timestamp: ${Date.now()}) </br>` ;
  } ;

  document.addEventListener('readystatechange', () => {
    mydiv.innerHTML += `ReadyState: ${document.readyState}  (timestamp: ${Date.now()})</br>`;
    
    if (document.readyState == 'complete') codeAddress();
  });

  function codeAddress() {
    mydiv.style.color = 'red';
  }
</script>

<div id='mydiv'></div>

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

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

3

डोम रीडाय की स्क्रिप्ट पर एक नज़र डालें जो डोम लोड होने पर निष्पादित करने के लिए कई फ़ंक्शन सेट करने की अनुमति देती है। यह मूल रूप से है कि डोम तैयार कई लोकप्रिय जावास्क्रिप्ट पुस्तकालयों में क्या करता है, लेकिन हल्का है और इसे आपकी बाहरी स्क्रिप्ट फ़ाइल की शुरुआत में लिया और जोड़ा जा सकता है।

उदाहरण उपयोग

// add reference to domReady script or place 
// contents of script before here

function codeAddress() {

}

domReady(codeAddress);

— रस कैम
स्रोत

0

window.onload इस तरह काम करेगा:

function codeAddress() {
	document.getElementById("test").innerHTML=Date();
}
window.onload = codeAddress;

<!DOCTYPE html>
<html>
<head>
	<title>learning java script</title>
	<script src="custom.js"></script>
</head>
<body>
	<p id="test"></p>
	<li>abcd</li>
</body>
</html>

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

— रुद्र
स्रोत