Bagaimana untuk menambah onload event untuk sebuah elemen div?

Tidak, anda dapat't. Cara termudah untuk membuat pekerjaan yang akan dimasukkan ke fungsi panggilan langsung setelah elemen

Contoh:

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

atau bahkan lebih baik hanya di depan </body>:

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>

...jadi itu doesn't memblokir konten berikut dari loading.

The onload event hanya dapat digunakan pada dokumen(tubuh) itu sendiri, bingkai, gambar, dan script. Dengan kata lain, hal ini dapat melekat hanya tubuh dan/atau _each eksternal resource. Div bukan merupakan sumber daya eksternal dan's dimuat sebagai bagian dari tubuh, sehingga onload acara doesn't berlaku di sana.

Anda dapat memicu beberapa js secara otomatis pada sebuah elemen IMG menggunakan onerror, dan tidak src.

onload event ini hanya mendukung dengan beberapa kategori seperti yang tercantum di bawah ini.

, , <iframe>, , <input type="image">, , <script>, 

Berikut referensi untuk onload event

Coba ini! Dan jangan pernah gunakan memicu dua kali pada div!

Anda dapat menentukan fungsi untuk menelepon sebelum tag div.

$(function(){
    $('div[onload]').trigger('onload');
});

DEMO: [jsfiddle][1]

Saya hanya ingin menambahkan di sini bahwa jika ada orang yang ingin memanggil fungsi pada beban acara div & anda don't ingin menggunakan jQuery(karena konflik seperti dalam kasus saya) maka cukup memanggil fungsi setelah semua kode html atau kode lain yang telah anda tulis termasuk kode fungsi dan cukup memanggil 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>

Saya perlu memiliki beberapa kode inisialisasi berjalan setelah sepotong html (template contoh) dimasukkan, dan tentu saja aku didn't memiliki akses ke kode yang memanipulasi dan memodifikasi template DOM. Ide yang sama berlaku untuk setiap parsial modifikasi DOM dengan penyisipan sebuah elemen html, biasanya <div>.

Beberapa waktu yang lalu, saya melakukan hack dengan onload event yang hampir tak terlihat <img> yang terkandung dalam sebuah <div>, tetapi menemukan bahwa scoped, kosong gaya juga akan melakukan:

<div .... >

.....
</div>

Update(Jul 15 2017) - The <style> onload tidak didukung dalam versi terakhir dari IE. Tepi tidak mendukung hal itu, namun beberapa pengguna melihat ini sebagai browser yang berbeda dan tetap dengan IE. The <img> elemen tampaknya bekerja dengan baik di semua browser.

...
</div>

Untuk meminimalkan dampak visual dan penggunaan sumber daya dari gambar, menggunakan inline src yang membuat itu kecil dan transparan.

Salah satu komentar yang saya merasa saya perlu untuk membuat tentang menggunakan <script>adalah betapa sulit untuk menentukan mana <div> script dekat, terutama di template dimana anda dapat't harus identik id di masing-masing contoh yang template menghasilkan. Saya pikir jawabannya mungkin dokumen.currentScript, tapi ini tidak didukung secara universal. A <script> elemen tidak dapat menentukan sendiri lokasi DOM andal; referensi untuk 'ini' poin ke jendela utama, dan tidak membantu.

Saya percaya hal ini diperlukan untuk menetap untuk menggunakan <img> elemen, meskipun konyol. Ini mungkin sebuah lubang di DOM/javascript framework yang dapat digunakan plugging.

menggunakan iframe dan menyembunyikannya iframe bekerja seperti tag body

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

kita dapat menggunakan MutationObserver untuk memecahkan masalah dalam cara yang efisien menambahkan sampel kode di bawah ini

        #second{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #a1a1a1;
        }



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

Aku benar-benar suka YUI3 perpustakaan untuk hal semacam ini.

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

Lihat: http://developer.yahoo.com/yui/3/event/#onavailable

Sejak onload acara ini 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);

Add
Remove

<div id="element">Element</div>

Ketika anda memuat beberapa html dari server dan masukkan ke dalam DOM tree anda dapat menggunakan DOMSubtreeModified namun hal ini tak berlaku lagi - sehingga anda dapat menggunakan MutationObserver atau hanya mendeteksi konten baru dalam loadElement fungsi secara langsung sehingga anda don't perlu menunggu DOM peristiwa

var ignoreFirst=0;
var observer = (new MutationObserver((m, ob)=>
{
  if(ignoreFirst++>0) {
    console.log('Element add on', new Date());
  }
}
)).observe(content, {childList: true, subtree:true });

// simulate element loading
var tmp=1;
function loadElement(name) {  
  setTimeout(()=>{
    console.log(`Element ${name} loaded`)
    content.innerHTML += `<div>My name is ${name}</div>`; 
  },1500*tmp++)
}; 

loadElement('Michael');
loadElement('Madonna');
loadElement('Shakira');

<div id="content"><div>

Saya belajar javascript dan jquery dan akan melalui semua jawabannya, saya menghadapi masalah yang sama saat memanggil fungsi javascript untuk memuat elemen div. Aku mencoba $(&#39;<diba>&#39;).ready(function(){alert(&#39;test&#39;}) dan itu bekerja untuk saya. Aku ingin tahu apakah ini cara yang baik untuk melakukan onload panggilan pada elemen div dengan cara yang saya lakukan menggunakan jquery selector.

terima kasih

Karena semua kata, anda tidak dapat menggunakan onLoad event pada DIV bukan tapi itu sebelum tag body.

tapi dalam kasus anda memiliki satu footer file dan memasukkannya dalam banyak halaman. it's baik untuk memeriksa terlebih dahulu jika div yang anda inginkan pada halaman yang ditampilkan, sehingga kode doesn't dilaksanakan di halaman yang doesn't mengandung DIV bahwa untuk membuat beban lebih cepat dan menghemat waktu untuk aplikasi anda.

sehingga anda akan perlu untuk memberikan DIV ID dan lakukan:

var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}

Saya memiliki pertanyaan yang sama dan mencoba untuk mendapatkan sebuah Div untuk beban gulungan naskah, menggunakan onload atau beban. Masalah yang saya temukan adalah bahwa hal itu akan selalu bekerja sebelum Div bisa terbuka, tidak selama atau setelah, sehingga tidak't benar-benar bekerja.

Kemudian saya datang dengan ini sebagai pekerjaan sekitar.

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

Saya ditempatkan Div dalam Rentang dan memberikan Rentang dua peristiwa, mouseover dan mouseout. Kemudian di bawah Div, saya menempatkan link untuk membuka Div, dan memberikan link sebuah event untuk event onclick. Semua acara yang sama, untuk membuat halaman gulir ke bawah ke bagian bawah halaman. Sekarang ketika tombol untuk membuka Div diklik, maka halaman tersebut akan melompat ke bagian jalan, dan Div akan terbuka di atas tombol, menyebabkan mouseover dan mouseout acara untuk membantu mendorong gulir ke bawah naskah. Maka setiap gerakan mouse pada titik tersebut akan mendorong script untuk terakhir kalinya.

Pertama untuk menjawab pertanyaan anda: Tidak, anda bisa't, tidak langsung seperti anda ingin melakukannya. Mungkin sedikit terlambat untuk menjawab, tapi ini adalah solusi saya, tanpa jQuery, javascript murni. Ini pada awalnya ditulis untuk menerapkan fungsi mengubah ukuran untuk dihapus saja setelah DOM dimuat dan keyup.

Cara yang sama anda bisa 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 untuk melakukan sesuatu dengan div, dimuat setelah DOM dimuat, misalnya setelah ajax call, anda bisa menggunakan sangat membantu hack, yang mudah untuk memahami yang anda'll menemukan hal ...bekerja-dengan-unsur-sebelum-yang-dom-lebih-siap.... Ia mengatakan "sebelum DOM siap" tetapi karya-karya brilian dengan cara yang sama, setelah ajax penyisipan atau js-appendChild-apa pun dari div. Berikut ini's kode, dengan beberapa perubahan kecil untuk 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);

Gunakan tubuh.onload event sebaliknya, baik melalui atribut (<body onload="myFn()"> ...) atau dengan mengikat sebuah event di Javascript. Hal ini sangat umum dengan jQuery:

$(document).ready(function() {
    doSomething($('#myDiv'));
});

Anda bisa menggunakan selang untuk memeriksa sampai beban 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);

Mencoba ini.

document.getElementById("div").onload = alert("This is a div.");

<div id="div">Hello World</div>

Coba yang satu ini juga. Anda perlu untuk menghapus . dari oQuickReply.swap() untuk membuat fungsi kerja.

document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}

<div id="div"></div>

Anda tidak dapat menambahkan event onload pada div, tetapi anda dapat menambahkan onkeydown dan memicu event onkeydown pada dokumen yang memuat

$(function ()
{
  $(".ccsdvCotentPS").trigger("onkeydown");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`