mon*_*oys 212 html javascript
如何向元素添加onload事件？我可以用吗:
<div onload="oQuickReply.swap();" ></div>
为了这？
Dan*_*Man 219
不,你不能.使其工作的最简单方法是将函数调用直接放在元素之后
例:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
或者 - 甚至更好 - 就在前面</body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
...所以它不会阻止以下内容加载.
kij*_*jin 71
该onload事件只能用于document(body)自身,框架,图像和脚本.换句话说,它可以仅附加到身体和/或每个外部资源.div不是外部资源,它是作为正文的一部分加载的,因此onload事件不适用于那里.
Joh*_*ams 54
你可以使用onerror在IMG元素上自动触发一些js,而不是src.
<img src onerror='alert()'>
小智 21
onload事件它只支持少量标签,如下所示.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
这里是onload事件的参考
Kuo*_*ofp 16
试试这个!永远不要在div上使用触发器两次!
您可以在div标签之前定义要调用的函数.
$(function(){
$('div[onload]').trigger('onload');
});
演示:jsfiddle
小智 9
我只想在这里添加,如果有人想在div的load事件上调用一个函数而你不想使用jQuery(由于我的情况下的冲突),那么只需在所有html代码或任何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>
避免使用任何基于间隔的方法（因为它们不高效且不准确），并使用针对动态加载的父级的MutationObserver以获得更高的效率。divdiv
更新：这是我编写的一个方便的函数。像这样使用它：
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,
});
小智 6
我们可以使用MutationObserver有效地解决问题，在下面添加示例代码
<!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>
使用iframe并隐藏iframe就像body标签一样工作
<!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>
我需要在插入一大块html(模板实例)之后运行一些初始化代码,当然我无法访问操作模板和修改DOM的代码.同样的想法适用于通过插入html元素(通常是a)来对DOM进行任何部分修改<div>.
前段时间,我对a中<img>包含的几乎看不见的onload事件进行了攻击<div>,但发现了一个范围空的样式也会:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
更新(2017年7月15日) - <style>IE的最新版本不支持onload.Edge确实支持它,但有些用户认为这是一个不同的浏览器并坚持使用IE浏览器.该<img>元素似乎在所有浏览器中都能更好地运行.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
要最小化图像的视觉影响和资源使用,请使用内联src,使其保持小而透明.
我觉得我需要做一个关于使用a的评论<script>是确定哪个<div>脚本附近有多难,特别是在模板生成的每个实例中都不能有相同id的模板中.我认为答案可能是document.currentScript,但这并不是普遍支持的.甲<script>元件不能可靠地确定其自己的DOM位置; 对'this'的引用指向主窗口,没有任何帮助.
<img>尽管愚蠢,但我认为有必要使用元素.这可能是DOM/javascript框架中可能使用插件的漏洞.
由于该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);<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="element">Element</div>十一月2019年，我寻求一种方法来创建一个（假设的）onparse EventListener对于<elements>不拿onload。
（假设的）onparse EventListener必须能够在解析元素时进行侦听。
我对下面的“ 第二次尝试”感到非常满意，但是这让我感到惊讶，我可以通过创建一个量身定制的事件来使代码更短，更简单：
let parseEvent = new Event('parse');
这是迄今为止最好的解决方案。
下面的例子：
parse Eventwindow.onload任何时间运行）：
data-onparseparse EventListener到每个元素parse Event到每个元素以执行Callback工作示例：
let parseEvent = new Event('parse');
// 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;
}下面的“ 第一次尝试”（基于@JohnWilliams'出色的Empty Image Hack）使用了硬编码<img />并起作用。
我认为应该可以<img />完全删除硬编码，并且仅在检测到需要触发onparse事件的元素中的属性后才能动态插入它，例如：
data-onparse="run-oQuickReply.swap()"
事实证明，这确实非常有效。
下面的例子：
data-onparse<img src />在每个元素之后立即动态生成一个并将其附加到文档onerror EventListener在呈现引擎解析每个元素时触发<img src />Callback 并删除<img src />从文档动态生成的工作示例：
<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>data-onparse="run-oQuickReply.swap()"
// 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);
});我可以基于@JohnWilliams“ <img src>hack”（在此页面上，从2017年开始）-到目前为止，这是我遇到的最好的方法。
下面的例子：
onerror EventListener渲染引擎解析时触发<img src />Callback 并<img src />从文档中删除工作示例：
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>我们可以在 onload 中使用所有这些标签
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>
例如：
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>
function loadImage() {
alert("Image is loaded");
}小智 5
这是非常简单的解决方案并且 100% 有效。<img>如果您想在加载 div 中的所有数据后执行 javascript，只需在 div 内或 div 的最后一行加载一个标签即可。由于<img>标签支持onload事件，所以你可以在这里轻松调用javascript，如下所示：
<div>
<img onLoad="alert('Problem Solved');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>
上图仅显示一个点（.），您甚至无法正常看到它。尝试一下。
| 归档时间： |
|
| 查看次数： |
565800 次 |
| 最近记录： |