第三次尝试（和最终解决方案）

Question

如何向元素添加onload事件？我可以使用：

<div onload="oQuickReply.swap();" ></div>

为此？

Answer 1

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

之后

示例：

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

或 - 甚至更好 - 就在</body>：

前面

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

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

Answer 2

onload事件只能用于document(body)本身，框架，图像和脚本。换句话说，它可以仅附加到正文和/或每个外部资源。 div不是外部资源，而是作为正文的一部分加载，因此onload事件不适用于那里。

Answer 3

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

<img src onerror='alert()'>

Answer 4

onload事件它只支持少量标签，如下所示。

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

此处为onload event

的参考

Answer 5

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

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

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

DEMO：jsfiddle

Answer 6

我只想在此添加，如果有人想在div＆amp;的load事件上调用函数你不想使用jQuery（由于我的情况下的冲突）然后只需在所有html代码或你编写的任何其他代码（包括函数代码和只需调用一个函数。

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

OR

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>

Answer 7

在2019年11月，我正在寻找一种方法来为onparse创建一个（假设的）EventListener <elements>，而不用onload。

（假设的）onparse EventListener必须能够在解析元素时收听。

第三次尝试（和最终解决方案）

我对下面的 Second Attempt 感到很满意，但是让我感到惊讶的是，通过创建一个定制的事件，我可以使代码更短，更简单：

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出色的 Empty Image Hack ）使用了硬编码的<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>&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年开始）上进行构建-到目前为止，这是我遇到的最好的方法。 / p>

以下示例：

在呈现引擎解析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 />

Answer 8

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

Answer 9

我需要在插入一大块html（模板实例）之后运行一些初始化代码，当然我无法访问操作模板和修改DOM的代码。对于通过插入html元素（通常是id）对DOM进行任何部分修改，同样的想法也适用。

前段时间，我对<div>中包含的几乎不可见<img>的onload事件进行了攻击，但发现了一个范围空的样式也会这样做：

<div>

更新（2017年7月15日） - IE的最新版本不支持<div .... > <style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style> ..... </div> onload。 Edge确实支持它，但有些用户认为这是一个不同的浏览器并坚持使用IE浏览器。 <style>元素似乎在所有浏览器中都能更好地运行。

<img>

为了最大限度地减少图像的视觉影响和资源使用，请使用内联src，使其保持小而透明。

我觉得我需要对使用<div...> <img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /> ... </div>做出的一个评论是确定哪个<script>脚本附近有多难，特别是在模板中您可以拥有的模板生成的每个实例中的相同ID。我认为答案可能是document.currentScript，但这并不是普遍支持的。 <div>元素无法可靠地确定自己的DOM位置;提及这个＆＃39;指向主窗口，没有任何帮助。

我认为尽管愚蠢，但仍有必要使用<script>元素。这可能是DOM / javascript框架中可能使用插件的漏洞。

Answer 10

我们可以使用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>

Answer 11

我真的很喜欢这种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

Answer 12

避免使用任何基于时间间隔的方法，而使用MutationObserver来定位动态加载的div的父项div，以提高效率。

这是简单的代码段：

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

Answer 13

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

感谢

Answer 14

正如所有人所说，你不能在DIV上使用onLoad事件，而是在body标签之前使用。

但是如果您有一个页脚文件并将其包含在许多页面中。最好首先检查你想要的div是否显示在该页面上，因此代码不会在不包含该DIV的页面中执行，以使其加载更快并节省一些时间为您的申请。

因此您需要为该DIV提供ID并执行：

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

Answer 15

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

Answer 16

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

也试试这个。您需要从.中删除oQuickReply.swap()才能使该功能正常运行。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 17

您可以使用一个间隔来检查它，直到它像这样加载： https://codepen.io/pager/pen/MBgGGM

Answer 18

首先回答您的问题：不，不能，不是直接像您想要的那样。回答可能会有点晚，但这是我的解决方案，没有jQuery，没有纯JavaScript。最初是为了在DOM加载后和在keyup上对文本区域应用调整大小功能而编写的。

以相同的方式，您可以使用它对（全部）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调用后，您可以使用非常有用的技巧，这一点很容易理解，您会发现它...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);

Answer 19

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

Answer 20

当您从服务器加载一些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>

Answer 21

您可以如下附加事件监听器。每当具有选择器#my-id的div完全加载到DOM时，它将触发。

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

在这种情况下，EventName可能是“加载”或“点击”

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

Answer 22

我们可以在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">

Answer 23

使用body.onload事件，通过属性（<body onload="myFn()"> ...）或在Javascript中绑定事件。这在jQuery中极为常见：

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

Answer 24

这是非常简单的解决方案，并且 100% 有效。只需在 div 内或在 div 的最后一行加载一个 < img > 标签，如果您认为要在 div 中加载所有数据后执行 javascript。由于标签支持 onload 事件，所以你可以像下面这样轻松调用 javascript：

< img onLoad="alert('问题解决');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP//wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />

上图只会显示一个点（.），您甚至无法正常看到。试试吧。

Answer 25

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`

finalRow = cells(1000000,1).end(xlup).row
yourIncrement = 1
for i = 1 to finalRow
    if isempty(cells(i,1)) then
        cells(i,1) = "check" & yourIncrement
        yourIncrement = yourIncrement + 1
    end if
next i

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

25 个答案:

第三次尝试（和最终解决方案）

第二次尝试

第一次尝试