如何为一个div元素添加onload事件

Question

如何为一个div元素添加onload事件

311

如何向元素添加一个 onload 事件？

我能使用以下代码吗：

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

为了这个做什么？

- monkey_boys

1

最好的 body 更好的 div - KingRider

2

div 元素不会“加载”。 - Armen Michaeli

1

现在有一个更相关的答案（https://stackoverflow.com/questions/58837574/is-there-an-equivalent-of-onload-or-a-hypothetical-onparse-for-standard-html），也许您可以修改接受答案？ - mplungjan

27个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jo_va · Answer 1

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

- dota2pro · Answer 2

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

- Real Virtual Technologies · Answer 3

这是一个非常简单的解决方案，并且百分之百有效。只需在

标签内部或者最后一行加载一个<img>标签，如果你想要在所有数据加载完毕后执行javascript脚本。由于<img>标签支持onload事件，所以可以像下面这样轻松地调用javascript：

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

上面的图片只会显示一个点（.），通常你甚至看不到它。试试看。

- Balaji · Answer 4

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

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

eg:

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

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

- mjhm · Answer 5

我非常喜欢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

- ddlab · Answer 6

首先回答你的问题：不，你不能像你想要的那样直接做到。可能有点晚了，但这是我的解决方案，没有使用jQuery，纯JavaScript编写。最初是为了在DOM加载后和键盘按键事件触发时将调整函数应用于文本区域。

同样的方式，您可以使用它来对（所有）div执行某些操作，或仅指定一个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);
});

如果您确实需要在DOM加载后处理一个div，例如在ajax调用之后，您可以使用一种非常有帮助的技巧，这很容易理解，您将在...working-with-elements-before-the-dom-is-ready...中找到它。它说“在DOM准备就绪之前”，但在ajax插入或js-appendChild-whatever 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);

- Selective · Answer 7

我有同样的问题，试图让一个 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两个事件，一个是mouseover，另一个是mouseout。然后，在该Div下面，我放置了一个链接来打开该Div，并为该链接添加了一个onclick事件。所有事件都相同，以使页面滚动到页面底部。现在，当单击打开Div的按钮时，页面将向下跳跃一部分，并且Div将在按钮上方打开，从而导致mouseover和mouseout事件帮助推动滚动脚本。此时鼠标的任何移动都将最后一次推动脚本。

- Mostafa Yousef · Answer 8

正如大家所说，你不能在 DIV 上使用 onLoad 事件，而是要将它放在 body 标签之前。

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

因此，你需要给那个 DIV 分配一个 ID 并进行以下操作：

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

- subro · Answer 9

我正在学习JavaScript和jQuery，浏览了所有答案，当调用JavaScript函数加载div元素时，我遇到了同样的问题。我尝试了$('<divid>').ready(function(){alert('test'})，它对我有效。我想知道这种使用jQuery选择器的方式在div元素上执行onload调用是否是一个好方法。

谢谢

- Kamil Kiełczewski · Answer 10

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