Bagaimana cara Anda menambahkan onload acara ke elemen?
Bisakah saya menggunakan:
<div onload="oQuickReply.swap();" ></div>untuk ini?
divelemen tidak "memuat".
Jawaban:
Tidak bisa. Cara termudah untuk membuatnya berfungsi adalah dengan menempatkan panggilan fungsi langsung setelah elemen
Contoh:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...atau - bahkan lebih baik - tepat di depan </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>... jadi itu tidak memblokir konten berikut dari memuat.
</body>. fe jika Anda ingin menyembunyikan <div>satu - satunya jika javascript diaktifkan tetapi hindari "flashing". Waktu visibilitas tergantung pada berapa lama browser perlu memuat / mem-parsing semua skrip inline / eksternal.
onload
The onloadevent hanya dapat digunakan pada document(body)itu sendiri, frame, gambar, dan skrip. Dengan kata lain, itu dapat dilampirkan hanya pada badan dan / atau setiap sumber daya eksternal . Div bukan sumber daya eksternal dan dimuat sebagai bagian dari tubuh, sehingga onloadacara tidak berlaku di sana.
onloadtidak berfungsi pada <script>tanpa srcatribut HTML (saya mencoba menggunakan saran ini dalam skrip inline, dan ternyata tidak berfungsi)
Anda dapat memicu beberapa js secara otomatis pada elemen IMG menggunakan onerror, dan tanpa src.
<img src onerror='alert()'>acara onload hanya didukung dengan beberapa tag seperti yang tercantum di bawah ini.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>Di sini referensi untuk acara onload
Coba ini! Dan tidak pernah menggunakan trigger dua kali pada div!
Anda dapat menentukan fungsi untuk memanggil sebelum tag div.
$(function(){
$('div[onload]').trigger('onload');
});DEMO: jsfiddle
onload) dan kemudian memanggil fungsi-fungsi tersebut. Skrip berfungsi bahkan jika Anda mengubah atribut ke sesuatu selain onloadmis. Jsfiddle.net/mrszgbxh
Saya hanya ingin menambahkan di sini bahwa jika ada yang ingin memanggil fungsi saat memuat acara div & Anda tidak ingin menggunakan jQuery (karena konflik seperti dalam kasus saya) maka cukup panggil fungsi setelah semua kode html atau kode lain yang telah Anda tulis termasuk kode fungsi dan cukup panggil fungsi.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>ATAU
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>kita dapat menggunakan MutationObserver untuk menyelesaikan masalah secara efisien dengan menambahkan kode sampel di bawah ini
<!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>Pada November 2019, saya mencari cara untuk membuat (hipotetis) onparse EventListeneruntuk <elements>yang tidak mengambil onload.
(Hipotetis) onparse EventListenerharus dapat mendengarkan ketika elemen diurai .
Saya cukup senang dengan Percobaan Kedua di bawah ini, tetapi saya baru sadar bahwa saya dapat membuat kode lebih pendek dan sederhana, dengan membuat acara yang dibuat khusus:
let parseEvent = new Event('parse');Ini adalah solusi terbaik.
Contoh di bawah ini:
parse Eventwindow.onloadkapan saja) yang:
data-onparseparse EventListenerke masing-masing elemen tersebutparse Eventke masing-masing elemen untuk mengeksekusiCallbackContoh kerja:
// 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>The Attempt Pertama bawah (berdasarkan @JohnWilliams'brilian Kosong Gambar Hack ) menggunakan hardcoded<img /> dan bekerja.
Saya pikir itu mungkin untuk menghapus hardcoded <img />sepenuhnya dan hanya secara dinamis memasukkannya setelah mendeteksi, dalam elemen yang perlu memecat suatu onparseperistiwa, atribut seperti:
data-onparse="run-oQuickReply.swap()"Ternyata, ini bekerja dengan sangat baik.
Contoh di bawah ini:
data-onparse<img src />dan menambahkannya ke dokumen, segera setelah masing-masing elemen tersebutonerror EventListenerketika mesin rendering mem-parsing masing-masing<img src />Callback dan menghapus yang dihasilkan secara dinamis <img src />dari dokumenContoh kerja:
// 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>Saya dapat membangun @JohnWilliams' <img src>retas (di halaman ini, mulai 2017) - yang sejauh ini merupakan pendekatan terbaik yang pernah saya temui.
Contoh di bawah ini:
onerror EventListenersaat mesin rendering diurai<img src />Callback dan hapus <img src />dari dokumenContoh kerja:
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 />gunakan iframe dan sembunyikan iframe berfungsi seperti tag tubuh
<!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>Saya perlu menjalankan beberapa kode inisialisasi setelah sepotong html (contoh templat) dimasukkan, dan tentu saja saya tidak memiliki akses ke kode yang memanipulasi templat dan memodifikasi DOM. Gagasan yang sama berlaku untuk setiap modifikasi parsial DOM dengan memasukkan elemen html, biasanya a<div> .
Beberapa waktu yang lalu, saya melakukan hack dengan event onload yang hampir tidak terlihat yang <img>terkandung dalam a <div>, tetapi menemukan bahwa gaya scoped, kosong juga akan melakukan:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Pembaruan (15 Jul 2017) - <style>Onload tidak didukung di versi terakhir IE. Edge memang mendukungnya, tetapi beberapa pengguna melihat ini sebagai browser yang berbeda dan tetap menggunakan IE. The <img>elemen tampaknya bekerja lebih baik di semua browser.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>Untuk meminimalkan dampak visual dan penggunaan sumber daya gambar, gunakan src sebaris yang membuatnya kecil dan transparan.
Satu komentar yang saya rasa perlu saya buat tentang menggunakan <script>adalah seberapa sulit untuk menentukan <div>skrip mana yang dekat, terutama dalam templating di mana Anda tidak dapat memiliki id yang identik dalam setiap contoh yang dihasilkan oleh template. Saya pikir jawabannya mungkin document.currentScript, tetapi ini tidak didukung secara universal. Suatu <script>elemen tidak dapat menentukan lokasi DOMnya sendiri secara andal; referensi ke 'ini' menunjuk ke jendela utama, dan tidak membantu.
Saya percaya perlu untuk puas menggunakan <img>elemen, meskipun konyol. Ini mungkin lubang di kerangka DOM / javascript yang bisa menggunakan plugging.
Karena onloadacara hanya didukung pada beberapa elemen, Anda harus menggunakan metode alternatif.
Anda dapat menggunakan MutationObserver untuk ini:
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>Saya sangat suka perpustakaan YUI3 untuk hal semacam ini.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
Saya belajar javascript dan jquery dan sedang melalui semua jawaban, saya menghadapi masalah yang sama ketika memanggil fungsi javascript untuk memuat elemen div. Saya mencoba$('<divid>').ready(function(){alert('test'}) dan itu berhasil untuk saya. Saya ingin tahu apakah ini cara yang baik untuk melakukan panggilan onload pada elemen div seperti yang saya lakukan menggunakan pemilih jquery.
Terima kasih
Seperti yang telah dikatakan, Anda tidak bisa menggunakan event onLoad pada DIV sebagai gantinya tetapi sebelum tag body.
tetapi jika Anda memiliki satu file footer dan memasukkannya dalam banyak halaman. lebih baik untuk memeriksa terlebih dahulu jika div yang Anda inginkan ada di halaman yang ditampilkan, sehingga kode tidak dieksekusi di halaman yang tidak mengandung DIV untuk membuatnya memuat lebih cepat dan menghemat waktu untuk aplikasi Anda.
jadi Anda perlu memberikan DIV itu ID dan melakukan:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}Saya memiliki pertanyaan yang sama dan sedang mencoba untuk mendapatkan Div untuk memuat skrip gulir, menggunakan onload atau memuat. Masalah yang saya temukan adalah bahwa itu akan selalu berfungsi sebelum Div dapat dibuka, tidak selama atau setelah, jadi itu tidak akan berhasil.
Lalu saya datang dengan ini sebagai pekerjaan di sekitar.
<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>Saya menempatkan Div di dalam Span dan memberikan Span dua peristiwa, mouseover dan mouseout. Kemudian di bawah Div itu, saya menempatkan tautan untuk membuka Div, dan memberikan tautan itu acara untuk onclick. Semua acara sama persis, untuk membuat halaman gulir ke bawah ke bawah halaman. Sekarang ketika tombol untuk membuka Div diklik, halaman akan melompat turun sebagian, dan Div akan terbuka di atas tombol, menyebabkan peristiwa mouseover dan mouseout membantu mendorong skrip gulir ke bawah. Maka setiap gerakan mouse pada saat itu akan mendorong skrip untuk terakhir kalinya.
Anda dapat menggunakan interval untuk memeriksanya sampai dimuat seperti ini: 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);Pertama untuk menjawab pertanyaan Anda: Tidak, Anda tidak bisa, tidak secara langsung seperti yang Anda inginkan. Mungkin agak terlambat untuk menjawab, tapi ini solusi saya, tanpa jQuery, javascript murni. Ini awalnya ditulis untuk menerapkan fungsi mengubah ukuran ke textareas setelah DOM dimuat dan pada keyup.
Cara yang sama Anda dapat menggunakannya untuk melakukan sesuatu dengan (semua) divs atau hanya satu, jika ditentukan, seperti:
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);
});Jika Anda benar-benar perlu melakukan sesuatu dengan div, dimuat setelah DOM dimuat, misalnya setelah panggilan ajax, Anda bisa menggunakan peretasan yang sangat membantu, yang mudah dimengerti dan Anda akan menemukannya ... bekerja-dengan- elemen-sebelum-the-dom-adalah-siap ... . Ia mengatakan "sebelum DOM siap" tetapi berfungsi dengan cara yang sama, setelah penyisipan ajax atau js-appendChild-apa pun div. Inilah kodenya, dengan beberapa perubahan kecil pada kebutuhan saya.
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);Ketika Anda memuat beberapa html dari server dan memasukkannya ke dalam pohon DOM Anda dapat menggunakannya DOMSubtreeModifiednamun sudah usang - sehingga Anda dapat menggunakan MutationObserveratau hanya mendeteksi konten baru di dalam fungsi loadElement secara langsung sehingga Anda tidak perlu menunggu acara DOM
Anda dapat melampirkan pendengar acara seperti di bawah ini. Ini akan memicu setiap kali div memiliki pemilih #my-idmemuat sepenuhnya ke DOM.
$(document).on('EventName', '#my-id', function() {
// do something
});Dalam hal ini, EventName mungkin 'memuat' atau 'klik'
Coba ini.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Coba yang ini juga. Anda harus menghapus .dari oQuickReply.swap()agar fungsi berfungsi.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");dipanggil ketika baris ini dieksekusi dan hasilnya (yang undefined) ditugaskan untuk div.onload. Yang sama sekali tidak ada gunanya.
Anda tidak bisa menambahkan event onload di div, tetapi Anda bisa menambahkan onkeydown dan memicu event onkeydown pada pemuatan dokumen
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodylebih baikdiv