Jak dodać onloadzdarzenie do elementu?
Mogę uzyć:
<div onload="oQuickReply.swap();" ></div>dla tego?
divelementy nie „ładują się”.
Odpowiedzi:
Nie możesz. Najłatwiejszym sposobem, aby to zadziałało, byłoby umieszczenie wywołania funkcji bezpośrednio za elementem
Przykład:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...lub - jeszcze lepiej - tuż przed </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>... więc nie blokuje ładowania następującej treści.
</body>. np. jeśli chcesz ukryć <div>tylko jeśli JavaScript jest włączony, ale unikaj „flashowania”. Czas widoczności zależy od tego, jak długo przeglądarka musi załadować / parsować wszystkie wbudowane / zewnętrzne skrypty.
onload
onloadZdarzenie może być używany tylko na document(body)sobie, ram, obrazów i skryptów. Innymi słowy, może być dołączony tylko do ciała i / lub każdego zewnętrznego zasobu . Div nie jest zasobem zewnętrznym i jest ładowany jako część ciała, więc onloadzdarzenie nie ma tam zastosowania.
onloadnie działają na żadnym <script>bez srcatrybutu HTML (próbowałem skorzystać z tej porady w skrypcie wbudowanym i okazało się, że nie działa)
Możesz uruchomić niektóre js automatycznie na elemencie IMG, używając onerror i bez src.
<img src onerror='alert()'>Zdarzenie onload obsługuje tylko kilka tagów, takich jak wymienione poniżej.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>Tutaj odniesienie do zdarzenia onload
Spróbuj tego! I nigdy nie używaj spustu dwa razy na div!
Możesz zdefiniować funkcję do wywołania przed znacznikiem div.
$(function(){
$('div[onload]').trigger('onload');
});DEMO: jsfiddle
onload), a następnie wywołuje te funkcje. Skrypt działa, nawet jeśli zmienisz atrybut na coś innego niż onloadnp. Jsfiddle.net/mrszgbxh
Chcę tylko dodać tutaj, że jeśli ktoś chce wywołać funkcję podczas zdarzenia div div i nie chcesz używać jQuery (z powodu konfliktu, jak w moim przypadku), po prostu wywołaj funkcję po całym kodzie HTML lub dowolnym inny kod, który napisałeś, w tym kod funkcji i po prostu wywołaj funkcję.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>LUB
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>możemy użyć MutationObserver do skutecznego rozwiązania problemu, dodając poniższy przykładowy kod
<!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>W listopadzie 2019 r. Szukam sposobu na stworzenie (hipotetycznego), onparse EventListenerdo <elements>czego się nie zgadzam onload.
(Hipotetyczny) onparse EventListenermusi być w stanie nasłuchiwać podczas analizowania elementu .
Byłem bardzo zadowolony z drugiej próby poniżej, ale uderzyło mnie, że mogę skrócić i uprościć kod, tworząc wydarzenie dostosowane do potrzeb:
let parseEvent = new Event('parse');To najlepsze jak dotąd rozwiązanie.
Przykład poniżej:
parse Eventwindow.onloaddowolnym momencie), która:
data-onparseparse EventListenerdo każdego z tych elementówparse Eventdo każdego z tych elementów, aby wykonaćCallbackPrzykład roboczy:
// 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>Pierwsza próba poniżej (na podstawie @JohnWilliams"genialny Pusty Hack ) stosuje się sztywno <img />i pracował.
Pomyślałem, że powinno być możliwe <img />całkowite usunięcie zakodowanego na stałe i tylko dynamiczne wstawienie go po wykryciu w elemencie, który musiał uruchomić onparsezdarzenie, atrybutu takiego jak:
data-onparse="run-oQuickReply.swap()"Okazuje się, że to naprawdę działa bardzo dobrze.
Przykład poniżej:
data-onparse<img src />i dołącza go do dokumentu, natychmiast po każdym z tych elementówonerror EventListenergdy silnik renderujący analizuje każdy<img src />Callback i usuwa dynamicznie generowane <img src />z dokumentuPrzykład roboczy:
// 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>Mogę bazować na @JohnWilliams„ <img src>hacku ” (na tej stronie od 2017 r.) - co do tej pory jest najlepszym podejściem, na jakie się natknąłem.
Przykład poniżej:
onerror EventListenerpodczas analizy silnika renderowania<img src />Callback i usuwa <img src />z dokumentuPrzykład roboczy:
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 />użyj iframe i ukryj go iframe działa jak znacznik body
<!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>Musiałem uruchomić kod inicjujący po włożeniu fragmentu HTML (instancji szablonu) i oczywiście nie miałem dostępu do kodu, który manipuluje szablonem i modyfikuje DOM. Ten sam pomysł dotyczy każdej częściowej modyfikacji DOM poprzez wstawienie elementu HTML, zwykle a <div>.
Jakiś czas temu zrobiłem włamanie ze zdarzeniem onload prawie niewidocznego <img>zawartego w <div>, ale odkryłem, że styl o pustym zasięgu również:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Aktualizacja (15 lipca 2017 r.) - <style>obciążenie nie jest obsługiwane w ostatniej wersji IE. Edge go obsługuje, ale niektórzy użytkownicy postrzegają to jako inną przeglądarkę i trzymają się IE. <img>Elementem wydaje się lepiej działa we wszystkich przeglądarkach.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>Aby zminimalizować efekt wizualny i zużycie zasobów obrazu, użyj wbudowanego pliku src, który zachowa go mały i przezroczysty.
Jednym komentarzem, który powinienem zrobić na temat używania, jest <script>to, o ile trudniej jest ustalić, który <div>skrypt jest blisko, szczególnie w szablonach, w których nie można mieć identycznego identyfikatora w każdej instancji generowanej przez szablon. Myślałem, że odpowiedzią może być document.currentScript, ale nie jest to powszechnie obsługiwane. <script>Element nie może określić własne położenie DOM niezawodnie; odniesienie do „tego” wskazuje na główne okno i nie jest pomocne.
Uważam, że konieczne jest zadowalanie się użyciem <img>elementu, mimo że jest głupkowaty. Może to być dziura w strukturze DOM / javascript, która mogłaby użyć wtyczki.
Ponieważ onloadzdarzenie jest obsługiwane tylko w kilku elementach, musisz użyć alternatywnej metody.
Możesz do tego użyć 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>Naprawdę podoba mi się biblioteka YUI3.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
Uczę się javascript i jquery i przechodziłem przez całą odpowiedź, napotkałem ten sam problem podczas wywoływania funkcji javascript do ładowania elementu div. Próbowałem $('<divid>').ready(function(){alert('test'})i to zadziałało dla mnie. Chcę wiedzieć, że jest to dobry sposób na wykonanie wywołania onload na elemencie div w taki sam sposób, jak przy użyciu selektora jquery.
dzięki
Jak już powiedziano, nie można użyć zdarzenia onLoad na DIV, ale przed tagiem body.
ale jeśli masz jeden plik stopki i umieścisz go na wielu stronach. lepiej najpierw sprawdzić, czy żądany plik div znajduje się na tej stronie, aby kod nie był wykonywany na stronach, które nie zawierają tego DIV, aby przyspieszyć ładowanie i zaoszczędzić trochę czasu na aplikację.
więc musisz nadać temu DIV identyfikator i wykonać:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}Miałem to samo pytanie i próbowałem uzyskać Div, aby załadował skrypt przewijania, używając onload lub load. Problem, który znalazłem, polegał na tym, że zawsze działało, zanim Div mógł się otworzyć, a nie w trakcie lub po nim, więc tak naprawdę nie działało.
Potem wymyśliłem to jako obejście.
<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>Umieściłem Div wewnątrz Span i dałem Span dwa zdarzenia, najechanie myszką i mouseout. Następnie pod tym divem umieściłem link, aby otworzyć div, i dałem temu linkowi zdarzenie do kliknięcia. Wszystkie zdarzenia są dokładnie takie same, aby przewinąć stronę w dół na dole strony. Teraz, gdy kliknięty zostanie przycisk otwierający Div, strona częściowo przeskoczy w dół, a Div otworzy się nad przyciskiem, powodując, że zdarzenia najechania kursorem myszy i myszy zostaną przesunięte w dół. Wówczas każdy ruch myszy w tym punkcie popchnie skrypt po raz ostatni.
Możesz użyć interwału, aby to sprawdzić, dopóki się nie załaduje: 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);Najpierw odpowiedz na pytanie: Nie, nie możesz, nie wprost tak, jak chciałeś to zrobić. Może trochę spóźnić się na odpowiedź, ale to jest moje rozwiązanie, bez jQuery, czysty javascript. Pierwotnie został napisany, aby zastosować funkcję zmiany rozmiaru w obszarach tekstowych po załadowaniu DOM i włączeniu go.
W ten sam sposób możesz użyć go do zrobienia czegoś z (wszystkimi) divami lub tylko jednym, jeśli określono, tak:
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);
});Jeśli naprawdę musisz zrobić coś z divem, ładowanym po załadowaniu DOM, np. Po wywołaniu ajax, możesz użyć bardzo pomocnego hacka, który jest łatwy do zrozumienia, a znajdziesz go ... współpracuje z- elementy-przed-the-dom-jest gotowy ... . Mówi „zanim DOM jest gotowy”, ale działa genialnie w ten sam sposób, po wstawieniu ajax lub js-appendChild-cokolwiek z div. Oto kod z niewielkimi zmianami w moich potrzebach.
css
.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); }
}javascript
document.addEventListener("animationstart", function(event) {
var e = event || window.event;
if (e.animationName == "nodeReady") {
e.target.classList.remove('loaded');
do_something_else();
}
}, false);Po załadowaniu pliku HTML z serwera i wstawieniu go do drzewa DOM można go używać, DOMSubtreeModifiedjednak jest on przestarzały - można więc użyć MutationObserverlub po prostu wykryć nową zawartość bezpośrednio w funkcji loadElement, aby nie trzeba było czekać na zdarzenia DOM
Możesz dołączyć detektor zdarzeń, jak poniżej. Uruchamia się, gdy div mający selektor #my-idładuje się całkowicie do DOM.
$(document).on('EventName', '#my-id', function() {
// do something
});W takim przypadku nazwa zdarzenia może być „wczytaj” lub „kliknij”
Zamiast tego użyj zdarzenia body.onload za pomocą atrybutu ( <body onload="myFn()"> ...) lub poprzez powiązanie zdarzenia w JavaScript. Jest to niezwykle powszechne w przypadku jQuery :
$(document).ready(function() {
doSomething($('#myDiv'));
});Spróbuj tego.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Spróbuj tego też. Musisz usunąć .z, oQuickReply.swap()aby funkcja działała.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");wywoływany, gdy wiersz ten jest wykonywany, a wynik (który jest undefined) jest przypisywany div.onload. Co jest całkowicie bezcelowe.
Nie można dodawać obciążenia zdarzenia dla div, ale można dodać onkeydown i wyzwalać zdarzenie onkeydown podczas ładowania dokumentu
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodylepiejdiv