logo标签列表

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

javascripthtml
311

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

我能使用以下代码吗：

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

为了这个做什么？

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个回答
0
我成功地找到了一个简短而高效的解决方案。唯一的注意事项是，在被调用的函数内部没有访问"event"对象的权限，且包含"runOnLoadEvents()"的脚本标签应该被延迟/在所有内容加载完成后最后调用。 

<html>

<body>
  <div onload="doSomething(this, 1500)">
    <p>Loading...</p>
  </div>
  <div onload="doSomething(this, 2000)">
    <p>Loading some more...</p>
  </div>
</body>

<script>
  async function doSomething(element, time) {
    // Simulate a slow process with sleep/timeout
    await new Promise((handler) => setTimeout(handler, time));
    element.innerHTML = "<p>Loaded!</p>";
  }

  async function runOnLoadEvents() {
    // Taken from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event
    const skiplist = "BODY EMBED IFRAME IMG LINK OBJECT SCRIPT STYLE TRACK";
    const elements = document.querySelectorAll("[onload]");
    for (const e of elements) {
      if (skiplist.includes(e.tagName)) {
        continue;
      }
      e.onload();
    }
  }

  runOnLoadEvents();
</script>

</html>

0
你可以使用一个间隔来检查它是否加载完成，像这样： 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);
0
您可以按照以下方式附加事件监听器。每当具有选择器#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

-1

这里有一个对我有效的技巧，你只需要将你的 div 放在 body 元素内部即可

<body>

    <!-- Some code here -->
    
    <body onload="alert('Hello World')">
            <div ></div>
    </body>
    
    <!-- other lines of code -->

</body>

-2
使用body.onload事件，可以通过属性（<body onload="myFn()"> ...）或通过JavaScript绑定事件来实现。这在jQuery中非常常见：
$(document).ready(function() {
    doSomething($('#myDiv'));
});
1
JavaScript纯粹而不是jQuery，检查标签 ;) - KingRider
-4
你不能在 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>`

-4

试试这个。

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>

1
看起来它运行正常，但实际上只是在执行这行代码时调用了alert("This is a div.")，结果（即undefined）被赋值给了 div.onload，这完全没有意义。 - Frederic Leitenberger
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接