小开

onload事件只能用于document(body)本身、帧、图像和脚本。换句话说，它只能附加到body和/或每个外部资源。div不是外部资源，它是作为主体的一部分加载的，所以onload事件在那里不适用。

小开

我非常喜欢用YUI3库来做这类事情。

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


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

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

小开

利用身体。onload事件，或者通过attribute (<body onload="myFn()"> ...)，或者通过在Javascript中绑定一个事件。这在jQuery中非常常见:

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

小开

最佳答案

不，你不能。使其工作的最简单的方法是将函数调用直接放在元素之后

例子:

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

或者——甚至更好——正好在</body>前面:

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

.．.因此它不会阻止以下内容的加载。

小开

我只是想在这里添加，如果有人想在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>

小开

试试这个!永远不要在div上使用触发器两次!

您可以在div标记之前定义要调用的函数。

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

演示:jsfiddle

小开

你不能在div上添加事件onload，但你可以在文档加载时添加onkeydown并触发onkeydown事件

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

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


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

小开

使用iframe并隐藏它iframe就像一个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>

小开

Onload事件，它只支持下面列出的几个标签。

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

这里是onload事件的引用

小开

你可以使用onerror在IMG元素上自动触发一些js，而不使用src。

<img src onerror='alert()'>

小开

我正在学习javascript和jquery，并通过所有的答案，我在调用javascript函数加载div元素时遇到了同样的问题。我尝试了$('<divid>').ready(function(){alert('test'})，它为我工作。我想知道这是一个好方法来执行onload调用div元素的方式，我使用jquery选择器

谢谢

小开

我需要在插入一段html(模板实例)之后运行一些初始化代码，当然我无法访问操作模板和修改DOM的代码。通过插入html元素(通常是<div>)对DOM进行部分修改，也适用同样的想法。

前段时间，我对<div>中包含的几乎不可见的<img>的onload事件做了一个hack，但发现一个有作用域的空样式也可以:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

更新(2017年7月15日)- 上一版本的IE不支持<style> onload。Edge确实支持它，但一些用户认为这是一个不同的浏览器，并坚持使用IE。<img>元素似乎在所有浏览器上都能更好地工作

<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>

为了最小化图像的视觉影响和资源使用，可以使用内联src来保持图像的小而透明。

关于使用__abc0，我觉得我需要做的一个评论是，确定脚本靠近哪个<div>是多么困难，特别是在模板中，你不能在模板生成的每个实例中都有相同的id。我想答案可能是文件。但这不是普遍支持的。<script>元素不能可靠地确定自己的DOM位置;引用“this”指向主窗口，没有任何帮助。

我认为有必要满足于使用<img>元素，尽管它很愚蠢。这可能是DOM/javascript框架中的一个漏洞，需要加以弥补。

小开

如前所述，你不能在DIV上使用onLoad事件，而是在body标签之前使用它。

但如果你有一个页脚文件，并将其包含在许多页面中。最好先检查你想要的div是否在显示的页面上，这样代码就不会在不包含该div的页面上执行，从而加快加载速度并为应用程序节省一些时间。

所以你需要给那个DIV一个ID，然后做:

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

小开

我有同样的问题，并试图让一个Div加载一个滚动脚本，使用onload或load。我发现的问题是，它总是在Div打开之前工作，而不是在Div打开期间或之后，所以它不会真正工作。

然后我想出了这个方法。

<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放置在Span中，并给Span两个事件，一个鼠标悬停和一个鼠标悬停。然后在该Div下面，我放置了一个打开Div的链接，并为该链接提供了一个onclick事件。所有事件完全相同，使页面滚动到页面底部。现在，当单击打开Div的按钮时，页面将向下跳转一部分，Div将在按钮上方打开，导致鼠标悬停和鼠标退出事件帮助推动向下滚动脚本。然后，此时鼠标的任何移动都将最后一次推动脚本。

小开

试试这个。

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>

小开

你可以使用一个interval来检查它，直到它像这样加载: https://codepen.io/pager/pen/MBgGGM < / p >

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，纯javascript。它最初是用来在DOM加载后和keyup上对textarea应用resize函数的

同样地，你可以用它来做一些(所有)div或只有一个，如果指定的话，像这样:

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加载后加载，例如ajax调用后，你可以使用一个非常有用的hack，这很容易理解，你会发现它working-with-elements-before-the-dom-is-ready…。它说“在DOM准备好之前”，但它以同样的方式出色地工作，在ajax插入或js- appendchild -任何div之后。下面是代码，根据我的需要做了一些小更改。

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

小开

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

小开

当你从服务器加载一些html并将其插入DOM树时，你可以使用DOMSubtreeModified，但它已弃用——所以你可以使用MutationObserver或直接在loadElement函数中检测新内容，这样你就不需要等待DOM事件

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>

小开

在2019年11月，我正在寻找一种方法来为不接受onload的<elements>创建一个(假设的)onparse EventListener。

(假设的)onparse EventListener必须能够侦听解析元素时。

第三次尝试(最终解决方案)

我对下面的第二次尝试非常满意，但我突然想到，通过创建一个量身定制的事件，我可以使代码更短更简单:

let parseEvent = new Event('parse');

这是目前最好的解决方案。

下面的例子:

创建一个定制的parse Event
声明一个函数(可以在window.onload或任何时间运行)，该函数:
- 查找文档中包含属性data-onparse的所有元素
- 将parse 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>&lt;div&gt;</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'聪明的空图像破解)使用了硬编码的<img />并工作正常。

我认为应该可以完全删除硬编码的<img />，只在检测后动态插入它，在一个需要触发onparse事件的元素中，一个属性，如:

data-onparse="run-oQuickReply.swap()"

事实证明，这确实非常有效。

下面的例子:

查找文档中包含属性data-onparse的所有元素
动态生成<img src />并将其添加到文档中，紧跟在每个元素之后
当呈现引擎解析每个<img src />时，触发onerror EventListener
执行Callback 而且 remove从文档中动态生成的<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>&lt;div&gt;</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年开始)-这是，到目前为止，我遇到的最好的方法。

下面的例子:

当呈现引擎解析<img src />时，触发onerror EventListener
而且从文档中删除<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 />

小开

您可以如下所示附加一个事件侦听器。它将在具有#my-id选择器的div完全加载到DOM时触发。

$(document).on('EventName', '#my-id', function() {
// do something
});

在本例中，EventName可以是'load'或'click'

https://api.jquery.com/on/#on-events-selector-data-handler

小开

我们可以在onload中使用所有这些标签

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

例如:

function loadImage() {
alert("Image is loaded");
}

<img src="https://www.w3schools.com/tags/w3html.gif" onload="loadImage()" width="100" height="132">

小开

避免使用任何基于间隔的方法(因为它们不是性能和准确的)，并使用MutationObserver针对动态加载div的父div以获得更好的效率。

更新:这是我写的一个方便的函数。像这样使用它:

onElementLoaded("div.some_class").then(()=>{}).catch(()=>{});

/**
*
* Wait for an HTML element to be loaded like `div`, `span`, `img`, etc.
* ex: `onElementLoaded("div.some_class").then(()=>{}).catch(()=>{})`
* @param {*} elementToObserve wait for this element to load
* @param {*} parentStaticElement (optional) if parent element is not passed then `document` is used
* @return {*} Promise - return promise when `elementToObserve` is loaded
*/
function onElementLoaded(elementToObserve, parentStaticElement) {
const promise = new Promise((resolve, reject) => {
try {
if (document.querySelector(elementToObserve)) {
console.log(`element already present: ${elementToObserve}`);
resolve(true);
return;
}
const parentElement = parentStaticElement
? document.querySelector(parentStaticElement)
: document;


const observer = new MutationObserver((mutationList, obsrvr) => {
const divToCheck = document.querySelector(elementToObserve);


if (divToCheck) {
console.log(`element loaded: ${elementToObserve}`);
obsrvr.disconnect(); // stop observing
resolve(true);
}
});


// start observing for dynamic div
observer.observe(parentElement, {
childList: true,
subtree: true,
});
} catch (e) {
console.log(e);
reject(Error("some issue... promise rejected"));
}
});
return promise;
}

实现细节:

HTML:

<div class="parent-static-div">
<div class="dynamic-loaded-div">
this div is loaded after DOM ready event
</div>
</div>

JS:

var observer = new MutationObserver(function (mutationList, obsrvr) {
var div_to_check = document.querySelector(".dynamic-loaded-div"); //get div by class
// var div_to_check = document.getElementById('div-id'); //get div by id


console.log("checking for div...");
if (div_to_check) {
console.log("div is loaded now"); // DO YOUR STUFF!
obsrvr.disconnect(); // stop observing
return;
}
});


var parentElement = document.querySelector("parent-static-div"); // use parent div which is already present in DOM to maximise efficiency
// var parentElement = document // if not sure about parent div then just use whole 'document'


// start observing for dynamic div
observer.observe(parentElement, {
// for properties details: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
childList: true,
subtree: true,
});

小开

这是一个非常简单的解决方案，100%有效。只要在div中加载一个<img>标签，或者在div的最后一行，如果你认为你想要执行javascript，在div中加载所有数据后。因为<img>标签支持onload事件，所以你可以很容易地在这里调用javascript，如下所示

<div>
<img onLoad="alert('Problem Solved');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>

上图只显示了一个点(.)，你甚至无法正常看到。试试。< / p >

小开

这是一个对我有用的技巧，你只需要把你的div放在一个body元素

<body>


<!-- Some code here -->
    

<body onload="alert('Hello World')">
<div ></div>
</body>
    

<!-- other lines of code -->


</body>

如何将onload事件添加到div元素

第三次尝试(最终解决方案)

第二次尝试

第一次尝试