如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
在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 />
其他回答
我需要在插入一段html(模板实例)之后运行一些初始化代码,当然我无法访问操作模板和修改DOM的代码。通过插入html元素(通常是<div>)来对DOM进行任何部分修改,也适用同样的想法。
前一段时间,我做了一个黑客与一个几乎不可见的<img>包含在<div>的onload事件,但发现一个作用域,空风格也会做:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
更新(2017年7月15日)- IE上一个版本不支持<style> onload。Edge确实支持它,但一些用户认为这是一个不同的浏览器,并坚持使用IE。<img>元素似乎在所有浏览器上都能更好地工作。
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
为了最小化图像的视觉影响和资源使用,可以使用内联src来保持图像的小而透明。
关于使用<script>,我觉得我需要做的一个评论是,确定脚本靠近哪个<div>是多么困难,特别是在模板中,你不能在模板生成的每个实例中都有相同的id。我想答案可能是文件。但这不是普遍支持的。<script>元素不能可靠地确定自己的DOM位置;引用“this”指向主窗口,没有任何帮助。
我认为有必要满足于使用<img>元素,尽管它很愚蠢。这可能是DOM/javascript框架中的一个漏洞,需要加以弥补。
如前所述,你不能在DIV上使用onLoad事件,而是在body标签之前使用它。
但如果你有一个页脚文件,并将其包含在许多页面中。最好先检查你想要的div是否在显示的页面上,这样代码就不会在不包含该div的页面上执行,从而加快加载速度并为应用程序节省一些时间。
所以你需要给那个DIV一个ID,然后做:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
Onload事件,它只支持下面列出的几个标签。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
这里是onload事件的引用
避免使用任何基于间隔的方法(因为它们不是性能和准确的),并使用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,
});
我正在学习javascript和jquery,并通过所有的答案, 我在调用javascript函数加载div元素时遇到了同样的问题。 我尝试了$('<divid>').ready(function(){alert('test'}),它为我工作。我想知道这是一个好方法来执行onload调用div元素的方式,我使用jquery选择器。
谢谢