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

如何向元素添加onload事件?

我可以使用:

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

对于这个吗?

当前回答

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

2019-04-08 19:34:47

其他回答

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

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

2010-10-30 04:42:23

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

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

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

2021-05-20 13:49:14

我只是想在这里补充一点，如果有人想在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>

2012-10-17 10:03:56

避免使用任何基于间隔的方法(因为它们不是性能和准确的)，并使用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,
});

2020-08-10 11:44:30

首先回答你的问题:不，你不能，不能直接这样做，就像你想做的那样。也许现在回答有点晚，但这是我的解决方案，没有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);
});

如果你真的需要在DOM加载后加载div，例如在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);

2019-02-07 19:16:22

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

推荐文章

最新文章

标签