आप किसी onloadईवेंट को एक तत्व में कैसे जोड़ते हैं ?
क्या में उपयोग कर सकता हूँ:
<div onload="oQuickReply.swap();" ></div>इसके लिए?
divतत्व "लोड" नहीं करते हैं।
जवाबों:
नहीं, आप नहीं कर सकते। यह काम करने का सबसे आसान तरीका तत्व के बाद सीधे फ़ंक्शन कॉल करना होगा
उदाहरण:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...या - इससे भी बेहतर - बस के सामने </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>... तो यह लोड करने से निम्नलिखित सामग्री को अवरुद्ध नहीं करता है।
</body>। फ़े यदि आप <div>केवल तभी छिपाना चाहते हैं यदि जावास्क्रिप्ट सक्षम है लेकिन "चमकती" से बचें। दृश्यता का समय इस बात पर निर्भर करता है कि ब्राउज़र को सभी इनलाइन / बाहरी स्क्रिप्ट को लोड / पार्स करने की कितनी देर है।
onload
onloadघटना केवल पर इस्तेमाल किया जा सकता document(body)ही, फ्रेम्स, छवियाँ, और लिपियों। दूसरे शब्दों में, इसे केवल शरीर और / या प्रत्येक बाहरी संसाधन से जोड़ा जा सकता है । Div एक बाहरी संसाधन नहीं है और इसे शरीर के हिस्से के रूप में लोड किया गया है, इसलिए यह onloadघटना वहां लागू नहीं होती है।
onloadकिसी पर काम नहीं करता है (मैं इनलाइन स्क्रिप्ट में इस सलाह का उपयोग करने की कोशिश कर रहा था, और पाया कि यह काम नहीं कर रहा था)<script>src
आप किसी IMG तत्व पर स्वचालित रूप से onerror का उपयोग करके कुछ js ट्रिगर कर सकते हैं, और कोई src नहीं।
<img src onerror='alert()'>onload घटना यह केवल नीचे सूचीबद्ध कुछ टैग के साथ समर्थन करता है।
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>यहाँ onload घटना के लिए संदर्भ
इसे इस्तेमाल करे! और कभी भी div पर दो बार ट्रिगर का उपयोग न करें!
आप डिव टैग से पहले कॉल करने के लिए फ़ंक्शन को परिभाषित कर सकते हैं।
$(function(){
$('div[onload]').trigger('onload');
});डेमो: jsfiddle
onload) और फिर उन कार्यों को कॉल करता है। स्क्रिप्ट भी काम करता है अगर आप के अलावा कुछ करने के लिए विशेषता बदली onloadजैसे jsfiddle.net/mrszgbxh
मैं बस यहाँ जोड़ना चाहता हूँ कि यदि कोई div के लोड इवेंट पर किसी फ़ंक्शन को कॉल करना चाहता है और आप jQuery (मेरे मामले में संघर्ष के कारण) का उपयोग नहीं करना चाहते हैं, तो बस सभी HTML कोड या किसी भी के बाद एक फ़ंक्शन को कॉल करें अन्य कोड आपने फ़ंक्शन कोड सहित लिखा है और बस एक फ़ंक्शन को कॉल करें।
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>या
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>नीचे दिए गए नमूना कोड को प्रभावी तरीके से समस्या को हल करने के लिए हम MutationObserver का उपयोग कर सकते हैं
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#second{
position: absolute;
width: 100px;
height: 100px;
background-color: #a1a1a1;
}
</style>
</head>
<body>
<div id="first"></div>
<script>
var callthis = function(element){
element.setAttribute("tabIndex",0);
element.focus();
element.onkeydown = handler;
function handler(){
alert("called")
}
}
var observer = new WebKitMutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++)
if(mutation.addedNodes[i].id === "second"){
callthis(mutation.addedNodes[i]);
}
})
});
observer.observe(document.getElementById("first"), { childList: true });
var ele = document.createElement('div');
ele.id = "second"
document.getElementById("first").appendChild(ele);
</script>
</body>
</html>नवंबर 2019 में, मैं एक (काल्पनिक) बनाने के लिए एक तरह से मांग कर रहा हूँ onparse EventListenerके लिए <elements>जो नहीं लेते onload।
किसी तत्व के पार्सonparse EventListener होने पर (काल्पनिक) सुनने में सक्षम होना चाहिए ।
मैं नीचे दिए गए दूसरे प्रयास से बहुत खुश था , लेकिन इसने मुझ पर प्रहार किया कि मैं एक दर्जी घटना को बनाकर कोड को छोटा और सरल बना सकता हूं:
let parseEvent = new Event('parse');यह अभी तक का सबसे अच्छा समाधान है।
नीचे दिए गए उदाहरण:
parse Eventwindow.onload किसी भी समय या किसी भी समय ) की करता है:
data-onparseparse EventListenerउन तत्वों से प्रत्येक कोparse Eventउन तत्वों में से प्रत्येक को निष्पादित करने के लिए डिस्पैच करता हैCallbackकाम करने का उदाहरण:
// Create (homemade) parse event
let parseEvent = new Event('parse');
// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {
// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
// Attach Event Listeners and Dispatch Events
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {
elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
elementWithParseEventListener.removeAttribute('data-onparse');
elementWithParseEventListener.dispatchEvent(parseEvent);
});
}
// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
switch (e.target.dataset.onparsed) {
case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
}
}
// Run Initialising Function
initialiseParseableElements();
let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';
setTimeout(() => {
// Add new element to page after time delay
document.body.appendChild(dynamicHeading);
// Re-run Initialising Function
initialiseParseableElements();
}, 3000);div {
width: 300px;
height: 40px;
padding: 12px;
border: 1px solid rgb(191, 191, 191);
}
h3 {
position: absolute;
top: 0;
right: 0;
}<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>पहले प्रयास में नीचे (के आधार पर @JohnWilliams'प्रतिभाशाली खाली छवि हैक ) का इस्तेमाल किया एक hardcoded<img /> और काम किया।
मुझे लगा कि हार्डकोड को <img />पूरी तरह से हटा देना और केवल डायनामिक तरीके से इसे सम्मिलित करने के बाद संभव होना चाहिए , एक तत्व में, जो किसी onparseघटना को आग लगाने के लिए आवश्यक है , जैसे एक विशेषता:
data-onparse="run-oQuickReply.swap()"यह पता चला है, यह वास्तव में बहुत अच्छी तरह से काम करता है।
नीचे दिए गए उदाहरण:
data-onparse<img src />और इसे उन तत्वों में से प्रत्येक के तुरंत बाद दस्तावेज़ में जोड़ देता हैonerror EventListenerजब रेंडरिंग इंजन प्रत्येक को पार्स करता है<img src />Callback और<img src /> दस्तावेज़ से उत्पन्न गतिशील रूप से निकालता हैकाम करने का उदाहरण:
// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
// Dynamically create and position an empty <img> after each of those elements
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {
let emptyImage = document.createElement('img');
emptyImage.src = '';
elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});
// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');
// Callback function for the EventListener below
const updateParseEventTarget = (e) => {
let parseEventTarget = e.target.previousElementSibling;
switch (parseEventTarget.dataset.onparse) {
case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
}
// Remove empty image
e.target.remove();
}
// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
});div {
width: 300px;
height: 40px;
padding: 12px;
border: 1px solid rgb(191, 191, 191);
}<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>मैं @JohnWilliams' <img src>हैक (इस पेज पर, 2017 से) पर निर्माण कर सकता हूं - जो कि, अब तक, सबसे अच्छा तरीका है जो मुझे आया है।
नीचे दिए गए उदाहरण:
onerror EventListenerजब इंजन रेंडर करता है तो आग लग जाती है<img src />Callback और निकालता है <img src />दस्तावेज़ सेकाम करने का उदाहरण:
let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');
const updateHeading = (e) => {
let myHeading = e.target.previousElementSibling;
if (true) { // <= CONDITION HERE
myHeading.textContent = 'My Updated Heading';
}
// Modern alternative to document.body.removeChild(e.target);
e.target.remove();
}
myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />एक iframe का उपयोग करें और इसे छिपाएं iframe बॉडी टैग की तरह काम करता है
<!DOCTYPE html>
<html>
<body>
<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>
</body>
</html>Html (टेम्प्लेट इंस्टेंस) के कुछ अंश डालने के बाद मुझे कुछ इनिशियलाइज़ेशन कोड चलाने की आवश्यकता थी, और निश्चित रूप से मेरे पास उस कोड तक पहुंच नहीं थी जो टेम्पलेट में हेरफेर करता है और DOM को संशोधित करता है। एक ही विचार html तत्व के सम्मिलन द्वारा DOM के किसी भी आंशिक संशोधन के लिए है, आमतौर पर a<div> ।
कुछ समय पहले, मैं एक लगभग अदृश्य के ऑनलोड घटना के साथ एक हैक किया था <img>एक में निहित <div>है, लेकिन पता चला कि एक scoped, खाली शैली भी करना होगा:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>अद्यतन (जुलाई 15 2017) - <style>आईई के अंतिम संस्करण में ऑनलोड का समर्थन नहीं किया गया है। एज इसका समर्थन करता है, लेकिन कुछ उपयोगकर्ता इसे एक अलग ब्राउज़र के रूप में देखते हैं और IE के साथ चिपके रहते हैं। यह <img>तत्व सभी ब्राउज़रों में बेहतर काम करता है।
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>छवि के दृश्य प्रभाव और संसाधन उपयोग को कम करने के लिए, एक इनलाइन src का उपयोग करें जो इसे छोटा और पारदर्शी रखता है।
एक टिप्पणी मुझे लगता है कि मुझे इस बारे में बनाने की ज़रूरत <script>है कि यह निर्धारित करना कितना कठिन है <div>कि स्क्रिप्ट पास है, विशेष रूप से टेम्प्लेटिंग में जहां आप प्रत्येक उदाहरण में एक समान आईडी नहीं रख सकते हैं जो टेम्पलेट उत्पन्न करता है। मुझे लगा कि उत्तर document.currentScript हो सकता है, लेकिन यह सार्वभौमिक रूप से समर्थित नहीं है। एक <script>तत्व अपने स्वयं के डोम स्थान को मज़बूती से निर्धारित नहीं कर सकता है; 'यह' का संदर्भ मुख्य विंडो की ओर इशारा करता है, और कोई मदद नहीं करता है।
मेरा मानना है कि <img>नासमझ होने के बावजूद एक तत्व का उपयोग करने के लिए व्यवस्थित होना आवश्यक है । यह DOM / जावास्क्रिप्ट फ्रेमवर्क में एक छेद हो सकता है जो प्लगिंग का उपयोग कर सकता है।
चूंकि onloadघटना केवल कुछ तत्वों पर समर्थित है, इसलिए आपको वैकल्पिक विधि का उपयोग करना होगा।
आप इसके लिए MutationObserver का उपयोग कर सकते हैं :
const trackElement = element => {
let present = false;
const checkIfPresent = () => {
if (document.body.contains(element)) {
if (!present) {
console.log('in DOM:', element);
}
present = true;
} else if (present) {
present = false;
console.log('Not in DOM');
}
};
const observer = new MutationObserver(checkIfPresent);
observer.observe(document.body, { childList: true });
checkIfPresent();
return observer;
};
const element = document.querySelector('#element');
const add = () => document.body.appendChild(element);
const remove = () => element.remove();
trackElement(element);<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="element">Element</div>मैं वास्तव में इस तरह की चीज के लिए YUI3 पुस्तकालय को पसंद करता हूं।
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload।
मैं जावास्क्रिप्ट और jquery सीख रहा हूं और सभी उत्तर से गुजर रहा हूं, मैंने उसी मुद्दे का सामना किया जब लोडिंग तत्व के लिए जावास्क्रिप्ट फ़ंक्शन को कॉल करना। मैंने कोशिश की $('<divid>').ready(function(){alert('test'})और यह मेरे लिए काम कर गया। मैं यह जानना चाहता हूं कि जिस तरह से मैंने jquery चयनकर्ता का उपयोग किया था उसमें div तत्व पर onload कॉल करने का यह एक अच्छा तरीका है।
धन्यवाद
जैसा कि सभी ने कहा, आप इसके बजाय DIV पर onLoad ईवेंट का उपयोग नहीं कर सकते, लेकिन यह बॉडी टैग से पहले किया जाता है।
लेकिन अगर आपके पास एक पाद फ़ाइल है और इसे कई पृष्ठों में शामिल करें। बेहतर है कि पहले जांच लें कि आप जो डिव चाहते हैं, वह उस पृष्ठ पर प्रदर्शित है, इसलिए कोड उन पृष्ठों में निष्पादित नहीं होता है, जिनमें यह नहीं है कि DIV इसे तेजी से लोड करने के लिए और आपके आवेदन के लिए कुछ समय बचा सकता है।
इसलिए आपको उस DIV को एक आईडी और देनी होगी:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}मेरे पास एक ही सवाल था और एक स्क्रिप्ट को लोड करने या लोड करने के लिए स्क्रॉल स्क्रिप्ट लोड करने के लिए प्राप्त करने की कोशिश कर रहा था। जो समस्या मुझे मिली, वह यह थी कि यह हमेशा डिव के खुलने से पहले काम करेगा, उसके दौरान या बाद में नहीं, इसलिए यह वास्तव में काम नहीं करेगा।
फिर मैं इसके साथ एक काम के रूप में आया।
<body>
<span onmouseover="window.scrollTo(0, document.body.scrollHeight);"
onmouseout="window.scrollTo(0, document.body.scrollHeight);">
<div id="">
</div>
<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>
</span>
</body>मैंने डिव को एक स्पैन के अंदर रखा और स्पैन को दो इवेंट दिए, एक माउसओवर और एक माउसआउट। फिर उस डिव के नीचे, मैंने डिव को खोलने के लिए एक लिंक रखा, और उस लिंक को ऑनक्लिक के लिए एक इवेंट दिया। पृष्ठ को नीचे की ओर स्क्रॉल करने के लिए सभी घटनाएँ बिल्कुल एक जैसी होती हैं। अब जब Div को खोलने के लिए बटन पर क्लिक किया जाता है, तो पृष्ठ भाग नीचे कूद जाएगा, और Div बटन के ऊपर खुल जाएगा, जिससे माउसओवर और माउसआउट ईवेंट स्क्रॉल डाउन स्क्रिप्ट को पुश करने में मदद करेंगे। तब उस समय माउस का कोई भी मूवमेंट स्क्रिप्ट को एक आखिरी बार धकेल देगा।
जब तक यह इस तरह से लोड न हो जाए, आप इसे जांचने के लिए एक अंतराल का उपयोग कर सकते हैं: https://codepen.io/pager/pen/MBgGGM
let checkonloadDoSomething = setInterval(() => {
let onloadDoSomething = document.getElementById("onloadDoSomething");
if (onloadDoSomething) {
onloadDoSomething.innerHTML="Loaded"
clearInterval(checkonloadDoSomething);
} else {`enter code here`
console.log("Waiting for onloadDoSomething to load");
}
}, 100);अपने प्रश्न का उत्तर देने के लिए सबसे पहले: नहीं, आप ऐसा नहीं कर सकते हैं, जैसा आप सीधे करना चाहते थे। जवाब देने में थोड़ा देर हो सकती है, लेकिन यह मेरा समाधान है, jQuery के बिना, शुद्ध जावास्क्रिप्ट। यह मूल रूप से DOM और लोड होने के बाद textareas के आकार परिवर्तन को लागू करने के लिए लिखा गया था।
उसी तरह से आप इसे (सभी) divs या केवल एक के साथ कुछ करने के लिए उपयोग कर सकते हैं, यदि निर्दिष्ट हो, जैसे:
document.addEventListener("DOMContentLoaded", function() {
var divs = document.querySelectorAll('div'); // all divs
var mydiv = document.getElementById('myDiv'); // only div#myDiv
divs.forEach( div => {
do_something_with_all_divs(div);
});
do_something_with_mydiv(mydiv);
});अगर आपको वास्तव में एक div के साथ कुछ करने की ज़रूरत है, तो DOM लोड होने के बाद लोड किया जाता है, जैसे anjax कॉल के बाद, आप एक बहुत ही उपयोगी हैक का उपयोग कर सकते हैं, जिसे समझना आसान है आप इसे पा लेंगे ... वर्किंग-के साथ- तत्वों पहले-डोम-है के लिए तैयार ... । यह कहता है, "DOM तैयार होने से पहले", लेकिन यह उसी तरह से शानदार काम करता है, जैसे कि ajax प्रविष्टि या js-appendChild- एक डिव का। यहाँ कोड है, मेरी जरूरतों के लिए कुछ छोटे बदलावों के साथ।
सीएसएस
.loaded { // I use only class loaded instead of a nodename
animation-name: nodeReady;
animation-duration: 0.001s;
}
@keyframes nodeReady {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}जावास्क्रिप्ट
document.addEventListener("animationstart", function(event) {
var e = event || window.event;
if (e.animationName == "nodeReady") {
e.target.classList.remove('loaded');
do_something_else();
}
}, false);जब आप सर्वर से कुछ html लोड करते हैं और इसे DOM ट्री में डालते हैं, तो आप DOMSubtreeModifiedइसका उपयोग कर सकते हैं लेकिन इसे हटा दिया जाता है - इसलिए आप MutationObserverसीधे loadElement फ़ंक्शन के अंदर नई सामग्री का उपयोग कर सकते हैं या इसका पता लगा सकते हैं, इसलिए आपको DOM ईवेंट की प्रतीक्षा करने की आवश्यकता नहीं होगी
आप नीचे के रूप में एक घटना श्रोता संलग्न कर सकते हैं। जब भी div चयनकर्ता #my-idलोड डोम पर पूरी तरह से लोड हो जाएगा तो यह ट्रिगर हो जाएगा ।
$(document).on('EventName', '#my-id', function() {
// do something
});घटना का मामला EventName 'लोड' या 'क्लिक' हो सकता है
इसे इस्तेमाल करे।
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>यह भी एक कोशिश करो। आप को हटाने की जरूरत .से oQuickReply.swap()समारोह काम कर रहे बनाने के लिए।
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");यह कहा जाता है जब इस लाइन को निष्पादित किया जाता है और परिणाम (जो है undefined) को सौंपा जाता है div.onload। जो पूरी तरह से निरर्थक है।
आप div पर ईवेंट ऑनलोड नहीं जोड़ सकते, लेकिन आप दस्तावेज़ लोड पर ऑनकीडाउन और ट्रिगर ऑनकडाउन इवेंट जोड़ सकते हैं
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodyबेहतरdiv