পৃষ্ঠাটি লোড হয়ে গেলে কোনও ফাংশন কীভাবে চালানো যায়?

246

পৃষ্ঠাটি লোড হয়ে গেলে আমি কোনও ফাংশন চালাতে চাই, তবে আমি এটি <body>ট্যাগটিতে ব্যবহার করতে চাই না ।

আমার কাছে একটি স্ক্রিপ্ট রয়েছে যা আমি যদি এটির শুরুতে এটি চালু করি তবে <body>:

function codeAddress() {
  // code
}

<body onLoad="codeAddress()">

তবে আমি এটি ছাড়া চালনা করতে চাই <body onload="codeAddress()">এবং আমি অনেক কিছুই চেষ্টা করেছি, যেমন:

window.onload = codeAddress;

কিন্তু এটা কাজ করছে না।

পৃষ্ঠাটি লোড হওয়ার পরে আমি কীভাবে এটি চালাব?

javascript html onload

— ক্লেস গুস্তাভসন
সূত্র

আপনি সংজ্ঞায়িত window.onload = codeAddressপরে চলছে codeAddress()? যদি তাই হয়, এটি কাজ করা উচিত। আপনি কি নিশ্চিত যে অন্য কোথাও ত্রুটি নেই?

— স্কিলড্রিক

এটি কোনও অর্থবোধ করে না। উইন্ডো.অনলোড পৃষ্ঠা লোডের পরে চলে এবং সমস্ত জাভাস্ক্রিপ্ট উপলভ্য থাকে, সুতরাং কোডএড্রেস () ফাংশনটি পৃষ্ঠা বা লিঙ্কযুক্ত জেএস ফাইলের মধ্যে যে কোনও জায়গায় ঘোষণা করা যেতে পারে। পেজ লোডের সময় এটি না ডাকা না হলে এটি আগে আসতে হবে না।

— জেরেদ ফারিশ

@ জারেড হ্যাঁ এটি করে। কটাক্ষপাত আছে jsfiddle.net/HZHmc । এটি কাজ করে না। তবে আপনি যদি উইন্ডোটি সরিয়ে নিন তবে সংজ্ঞায়নের পরে আনলোড করুন : jsfiddle.net/HZHmc/1 এটি কাজ করে।

— স্কিলড্রিক

একটি ফাংশন ঘোষণা সাধারণত স্কোপের শীর্ষে উত্তোলন করা হয়, যাতে ফাংশনটি অ্যাক্সেসযোগ্য সুযোগে যে কোনও জায়গায় ঘোষণা করা যেতে পারে।

— রুশ ক্যাম

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

আমি আমার উত্তরে যেমনটি বলেছি, কোডটি দেখেছি তেমন কোনও ভুল নেই - এটি কাজ করছে না তার কারণটি কোথাও জেএসে একটি ত্রুটি হতে হবে।

— স্কিলড্রিক

আপনি যদি শরীরে পাঠ্য সহ কোনও অনুচ্ছেদ স্থাপন করেন তবে ঠিক আছে ক্লিক না করা অবধি এটি লোড হবে না।

— ফ্লুরোসেন্টগ্রিন 5

এই গ্লোবাল ইভেন্ট হ্যান্ডলারটি কেবল ক্রোমে উপলব্ধ। বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— ডকস

177

JQuery বা উইন্ডো.অনলোড ব্যবহারের পরিবর্তে নেটিভ জাভাস্ক্রিপ্ট jQuery প্রকাশের পর থেকে দুর্দান্ত কিছু ফাংশন গ্রহণ করেছে। সমস্ত আধুনিক ব্রাউজারে এখন jQuery লাইব্রেরি ব্যবহার না করে তাদের নিজস্ব ডোম প্রস্তুত ফাংশন রয়েছে।

আপনি যদি নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করেন তবে আমি এটির পরামর্শ দেব।

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

— স্পেন্সার মে
সূত্র

4

(নুব প্রশ্ন: কি করে false?)

— ᔕᖺᘎᕊ

7

@। 'বুদবুদ' সম্পত্তি (যা আপনাকে অন্তর্ভুক্ত করতে হবে না, আমি কেবল ভাল অভ্যাসের জন্য সমস্ত বুলিয়ান পূরণ করি) fill 'বাতিল'যোগ্য সম্পত্তি সম্পর্কিত আরও একটি বুলিয়ান বিবৃতি রয়েছে, তবে উপরের বিবৃতিটি ইতিমধ্যে বাতিল -যোগ্য হিসাবে এটি খুব কার্যকর নয়। এটি সম্পর্কে এখানে আরও পড়ুন: developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

— স্পেনসার মে

1

এই মুহূর্তে আমি এটি সন্ধান করছিলাম :) DOM সম্পূর্ণ হয়ে গেলে কার্যকর করে, তাই আপনি এটিকে পরিচালনা করতে পারেন, যখন ব্রাউজারটি "পৃষ্ঠা সম্পূর্ণ লোডযুক্ত" বলে না, যা বাইরের স্টাফের উপর ভিত্তি করে কয়েক সেকেন্ড সময় নিতে পারে (যেমন বিজ্ঞাপন হিসাবে)

— নাথনিয়েল

কিছুটা নুব প্রশ্ন, পৃষ্ঠাটি লোড হচ্ছে কিনা তা আপনি যদি না জানেন? সম্পাদনা: আহ: ডকুমেন্ট.ডিয়ার স্টেট

— ব্রায়ান হ্যান্নি

1

@ এক্স-ইউরি "ডমোকন্টেন্টলয়েড ইভেন্টটি যখন ডকুমেন্টটি পুরো লোড এবং পার্স করা হয়ে থাকে তখন স্টাইলশিট, চিত্র এবং সাবফ্রেমগুলি লোডিং শেষ করার জন্য অপেক্ষা না করে (লোড ইভেন্টটি সম্পূর্ণ লোডযুক্ত পৃষ্ঠাটি সনাক্ত করতে ব্যবহার করা যেতে পারে) ব্যবহার করা হয়" fired - স্ট্যাকওভারফ্লো.com

— স্পেন্সার

46

দারিনের উত্তর কিন্তু jQuery স্টাইল গ্রহণ করা। (আমি জানি ব্যবহারকারী জাভাস্ক্রিপ্ট চেয়েছিলেন)।

বেহাল দৌড়

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

— জোসে খাওয়া
সূত্র

4

আপনার উত্তর আমাকে বরাদ্দ শেখায়, তবে jQuery / জাভাস্ক্রিপ্ট সম্পর্কে নয়।

— ইউনিকর্ন 2

2

@ বিজয়কুমার এটি jQuery, নেটিভ জাভাস্ক্রিপ্ট নয় তাই এটির কাজ করার জন্য আপনার একটি jQuery লাইব্রেরি প্রয়োজন

— স্পেনসার মে

30

বিকল্প সমাধান। আমি ব্রেভিটি এবং কোড সরলতার জন্য এটি পছন্দ করি।

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

এটি একটি বেনামে ফাংশন, যেখানে নাম নির্দিষ্ট করা হয়নি। এখানে যা ঘটে তা হ'ল, ফাংশনটি সংজ্ঞায়িত করা এবং একসাথে সম্পাদন করা। পৃষ্ঠাটি লোড করার আগে বা শীঘ্রই সমস্ত HTML উপাদান লোড হওয়ার পরে তা কার্যকর করা হবে কিনা তার উপর নির্ভর করে এটি শরীরের শুরু বা শেষের দিকে যুক্ত করুন।

— হাবীব
সূত্র

1

এটিই একমাত্র কোড যা গিটহাবের জন্য এইচটিএমএল পূর্বরূপের সাথে কাজ করে: htmlpreview.github.io অন্যান্য কোড, সঠিক হলেও এই এইচটিএমএল পূর্বরূপ দ্বারা নষ্ট হয়ে গেছে।

— জেসন ডাউসেট

1

এইচটিএমএল পৃষ্ঠার শেষে স্ক্রিপ্ট ট্যাগগুলি এবং বেনামে ফাংশনটির উদ্দেশ্য ব্যতীত কেউ কীভাবে এটি ব্যাখ্যা করতে পারেন?

— প্যাট-হাসি

10

window.onload = function() { ... ইত্যাদি দুর্দান্ত উত্তর নয়।

এটি সম্ভবত কাজ করবে, তবে এটি ইতিমধ্যে এই ইভেন্টটিতে আবদ্ধ হওয়া অন্য কোনও কার্যও ভেঙে ফেলবে। অথবা, যদি আপনার পরে কোনও ক্রিয়াকলাপ সেই ইভেন্টটির দিকে নজর রাখে তবে তা আপনার ভেঙ্গে যাবে। সুতরাং, আপনি কাজ করার পরে এমন কিছু কেন হয় নি তা বোঝার চেষ্টা করার পরে আপনি প্রচুর ঘন্টা ব্যয় করতে পারেন।

আরও দৃ rob় উত্তর এখানে:

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

উইন্ডো.অনলোড এটির মতো কাজ করবে:

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>

স্নিপেট প্রসারিত করুন

— রুদ্র
সূত্র