如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
避免使用任何基于间隔的方法(因为它们不是性能和准确的)，并使用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,
});
其他回答
我们可以在onload中使用所有这些标签
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>
eg:
函数loadImage() { alert(“图像已加载”); ｝ <img src="https://www.w3schools.com/tags/w3html.gif" onload="loadImage()" width="100" height="132">
在2019年11月，我正在寻找一种方法来创建一个(假设的)onparse EventListener <元素>不采取onload。
(假设的)onparse EventListener必须能够在元素被解析时监听。
第三次尝试(最终解决方案)
我对下面的Second Attempt非常满意，但我突然想到，通过创建一个量身定制的事件，我可以让代码更短更简单:
let parseEvent = new Event('parse');
这是目前最好的解决方案。
下面的例子:
创建一个定制的解析事件 声明一个函数(可以在window中运行)。Onload或任何时间): 查找文档中包含data-onparse属性的任何元素 将解析EventListener附加到每个这些元素 将解析事件分派给每个元素以执行回调
工作的例子:
// 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><div></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的聪明的空图像Hack)使用了硬编码的<img />并成功了。
我认为应该可以完全删除硬编码的<img />，只在检测后动态插入它，在一个需要触发onparse事件的元素中，像这样的属性:
data-onparse="run-oQuickReply.swap()"
事实证明，这确实非常有效。
下面的例子:
查找文档中包含data-onparse属性的任何元素 动态生成<img src />并将其添加到文档中，紧跟在每个元素之后 当呈现引擎解析每个<img src />时，触发onerror EventListener 执行回调并从文档中删除动态生成的<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><div></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年开始)——这是，到目前为止，我遇到的最好的方法。
下面的例子:
当呈现引擎解析<img src />时触发onerror EventListener 执行回调并从文档中删除<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 />
我有同样的问题，并试图让一个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>
I placed the Div inside a Span and gave the Span two events, a mouseover and a mouseout. Then below that Div, I placed a link to open the Div, and gave that link an event for onclick. All events the exact same, to make the page scroll down to bottom of page. Now when the button to open the Div is clicked, the page will jump down part way, and the Div will open above the button, causing the mouseover and mouseout events to help push the scroll down script. Then any movement of the mouse at that point will push the script one last time.
你不能在div上添加事件onload，但你可以在文档加载时添加onkeydown并触发onkeydown事件
$（函数（） { $（“.ccsdvCotentPS”）.trigger（“onkeydown”）; }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script> <div onkeydown=“setCss（ ）;”> </div>'
首先回答你的问题:不，你不能，不能直接这样做，就像你想做的那样。 也许现在回答有点晚，但这是我的解决方案，没有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);
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
