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

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

我真的很喜欢这种YUI3库。

<!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 id="mydiv"> ... </div> <script> YUI().use('node-base', function(Y) { Y.on("available", someFunction, '#mydiv') })

Answer 3

改为使用body.onload事件，通过属性（http://developer.yahoo.com/yui/3/event/#onavailable）或通过绑定Javascript中的事件。这与<body onload="myFn()"> ...非常相似：

jQuery

Answer 4

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

谢谢

Answer 5

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

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

所以你需要给DIV一个ID并做：

$('<divid>').ready(function(){alert('test'})

Answer 6

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

然后我想出了这个作为一个解决方案。

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

我把Div放在一个Span内，给了Span两个事件，一个mouseover和一个mouseout。然后在Div下方，我放置了一个打开Div的链接，并为该链接提供了onclick的事件。所有事件完全相同，使页面向下滚动到页面底部。现在，当单击打开Div的按钮时，页面将向下跳转，Div将在按钮上方打开，导致mouseover和mouseout事件有助于推动向下滚动脚本。然后鼠标在该点的任何移动将最后一次推动脚本。

Answer 7

试试这个。

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

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

Answer 8

您可以使用间隔来检查它，直到它像这样加载：<div id="div"></div>

https://codepen.io/pager/pen/MBgGGM

Answer 9

首先回答你的问题：不，你不能，不是直接喜欢你想这样做。回答可能有点晚，但这是我的解决方案，没有jQuery，纯粹的javascript。最初编写它是为了在加载DOM之后和keyup上将resize函数应用于textareas。

同样的方式你可以使用它来做（所有）div或只有一个（如果指定），如下所示：

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

如果你真的需要用div做一些事情，在加载DOM之后加载，例如在ajax调用之后，你可以使用一个非常有用的hack，这很容易理解，你会发现它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准备好之前”，但它在ajax插入或js-appendChild之后以同样的方式工作，无论div是什么。这是代码，对我的需求做了一些微小的改变。

CSS

...working-with-elements-before-the-dom-is-ready...

JavaScript的

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

Answer 10

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

Answer 11

当您从服务器加载一些html并将其插入DOM树时，您可以使用<button onclick="add()">Add</button> <button onclick="remove()">Remove</button> <div id="element">Element</div>但不推荐使用它 - 因此您可以使用DOMSubtreeModified或直接检测loadElement函数内的新内容，这样您就不需要等待DOM事件

MutationObserver

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

Answer 12

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

Answer 13

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

<div id="content"><div>

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

Answer 14

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

<img src onerror='alert()'>

Answer 15

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

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

这里是onload event的参考

Answer 16

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

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

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

但是：ぁzxswい

Answer 17

我只想在这里添加，如果有人想在div的load事件上调用一个函数而你不想使用jQuery（由于我的情况下的冲突），那么只需在所有html代码或任何html代码之后调用一个函数您编写的其他代码，包括功能代码，只需调用一个函数。

jsfiddle

要么

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

Answer 18

使用iframe并隐藏iframe就像body标签一样工作

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

  }

 my_func();
</script>

Answer 19

我需要在插入一大块html（模板实例）之后运行一些初始化代码，当然我无法访问操作模板和修改DOM的代码。对于通过插入html元素（通常是<!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>）对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>is的评论，确定脚本接近哪个<script>要困难得多，尤其是在模板生成的每个实例中你不能拥有相同id的模板中。我认为答案可能是document.currentScript，但这并不是普遍支持的。 <div>元素无法可靠地确定自己的DOM位置;对'this'的引用指向主窗口，没有任何帮助。

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

Answer 20

我们可以使用MutationObserver以有效的方式解决问题，在下面添加示例代码

<img>

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

问题描述投票：191回答：20

20个回答

最新问题

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

问题描述 投票：191回答：20

20个回答

最新问题

问题描述投票：191回答：20