[英]How to add onload event to a div element
如何向元素添加onload事件？
我可以用嗎：
<div onload="oQuickReply.swap();" ></div>
為了這？
不，你不能。 使其工作的最簡單方法是將函數調用直接放在元素之后
例子：
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
或者 - 甚至更好 - 就在</body>前面：
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
...所以它不會阻止加載以下內容。
您可以使用 onerror 在 IMG 元素上自動觸發一些 js，而無需使用 src。
<img src onerror='alert()'>
onload事件只能用於document(body)本身、框架、圖像和腳本。 換句話說，它只能附加到 body 和/或每個外部資源。 div 不是外部資源，它作為主體的一部分加載，因此onload事件不適用於那里。
onload 事件它只支持下面列出的幾個標簽。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
這里是onload 事件的參考
嘗試這個！ 永遠不要在 div 上使用觸發器兩次！
您可以在 div 標簽之前定義要調用的函數。
$(function(){
$('div[onload]').trigger('onload');
});
演示： jsfiddle
我只想在這里補充一點，如果有人想在 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>
我需要在插入一段 html（模板實例）后運行一些初始化代碼，當然我無法訪問操作模板和修改 DOM 的代碼。 同樣的想法適用於通過插入 html 元素（通常是<div>對 DOM 的任何部分修改。
前段時間，我對包含在<div>中的幾乎不可見的<img>的 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> <script>是多么困難，尤其是在模板生成的每個實例中不能具有相同 id 的模板中. 我認為答案可能是 document.currentScript，但這並不是普遍支持的。 <script>元素不能可靠地確定自己的 DOM 位置； 對“this”的引用指向主窗口，沒有幫助。
我認為有必要使用<img>元素，盡管它很愚蠢。 這可能是 DOM/javascript 框架中可以使用插入的漏洞。
我們可以使用 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>
在 2019 年 11 月，我正在尋找一種方法來為<elements>創建一個（假設的） onparse EventListener ，它不接受onload 。
（假設的） onparse EventListener必須能夠在解析元素時進行偵聽。
我對下面的第二次嘗試感到非常滿意，但讓我震驚的是我可以通過創建一個量身定制的事件來使代碼更短更簡單：
let parseEvent = new Event('parse');
這是迄今為止最好的解決方案。
下面的例子：
parse Eventwindow.onload或任何時間運行），它：
data-onparse任何元素parse EventListener附加到每個元素parse Event分派給每個元素以執行Callback工作示例：
// 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出色的Empty Image Hack ）使用了硬編碼的<img />並且有效。
我認為應該可以完全刪除硬編碼的<img />並且只有在檢測到需要觸發onparse事件的元素后才動態插入它，屬性如下：
data-onparse="run-oQuickReply.swap()"
事實證明，這確實非常有效。
下面的例子：
data-onparse任何元素<img src />並將其附加到文檔中，緊跟在每個元素之后<img src />時觸發onerror EventListenerCallback並從文檔中刪除動態生成的<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> hack （在此頁面上，從 2017 年開始）的基礎上 - 這是迄今為止我遇到的最佳方法。
下面的例子：
<img src />時觸發onerror EventListenerCallback並從文檔中移除<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 />
使用 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>
由於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>
避免使用任何基於間隔的方法，並使用MutationObserver以動態加載的div的父div為目標，以提高效率。
這是簡單的片段：
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,
});
我真的很喜歡 YUI3 庫的這類東西。
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})
我們可以在 onload 中使用所有這些標簽
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>
例如：
function loadImage() { alert("Image is loaded"); }
<img src="https://www.w3schools.com/tags/w3html.gif" onload="loadImage()" width="100" height="132">
首先回答你的問題：不，你不能，不像你想要的那樣直接。 回答可能有點晚了，但這是我的解決方案，沒有 jQuery，沒有純 javascript。 它最初是為了在加載 DOM 和 keyup 后對 textareas 應用調整大小函數而編寫的。
同樣，您可以使用它對（所有）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);
});
如果你真的需要用 div 做一些事情，在 DOM 加載后加載，例如在 ajax 調用之后，你可以使用一個非常有用的 hack，它很容易理解，你會發現它...... element-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);
這是非常簡單的解決方案，並且 100% 有效。 只需在 div 內或在 div 的最后一行加載一個 < img > 標簽，如果您認為要在 div 中加載所有數據后執行 javascript。 由於 <img> 標簽支持 onload 事件，所以你可以像下面這樣輕松調用 javascript：
<div><img onLoad="alert('問題解決');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP//wAAACH5BAEAAAAALAAAAAAABAAEAAAICRAEAOw==" /> </div> 上面這張圖只會顯示一個點(.)，你平時根本看不到。 嘗試一下。
我正在學習 javascript 和 jquery，並且正在研究所有答案，在調用 javascript 函數加載 div 元素時遇到了同樣的問題。 我試過$('<divid>').ready(function(){alert('test'})並且它對我$('<divid>').ready(function(){alert('test'}) 。我想知道這種在 div 元素上執行 onload 調用的好方法是我所做的使用 jquery 選擇器。
謝謝
如前所述，您不能在 DIV 上使用 onLoad 事件，而是在 body 標記之前使用它。
但如果您有一個頁腳文件並將其包含在許多頁面中。 最好先檢查您想要的 div 是否在顯示的頁面上，這樣代碼就不會在不包含該 DIV 的頁面中執行，以使其加載速度更快並為您的應用程序節省一些時間。
所以你需要給那個 DIV 一個 ID 並執行以下操作：
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
我有同樣的問題，並試圖讓 Div 使用 onload 或 load 加載滾動腳本。 我發現的問題是它總是在 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>
我將 Div 放在 Span 中，並為 Span 設置了兩個事件，一個鼠標懸停和一個鼠標移出。 然后在該 Div 下方，我放置了一個打開 Div 的鏈接，並為該鏈接提供了一個 onclick 事件。 所有事件完全相同，使頁面向下滾動到頁面底部。 現在當打開 Div 的按鈕被點擊時，頁面會跳到一半，Div 會在按鈕上方打開，導致 mouseover 和 mouseout 事件幫助推動向下滾動腳本。 然后鼠標在該點的任何移動都會最后一次推送腳本。
您可以使用間隔來檢查它，直到它像這樣加載： https : //codepen.io/pager/pen/MBgGGM
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);
當您從服務器加載一些 html 並將其插入 DOM 樹時，您可以使用DOMSubtreeModified但它已被棄用 - 因此您可以使用MutationObserver或直接檢測 loadElement 函數中的新內容，這樣您就無需等待 DOM 事件
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');
<div id="content"><div>
您可以附加一個事件偵聽器，如下所示。 每當具有選擇器#my-id的 div 完全加載到 DOM 時，它就會觸發。
$(document).on('EventName', '#my-id', function() {
// do something
});
在這種情況下，EventName 可能是“加載”或“點擊”
這是一個對我有用的技巧，你只需要將你的 div 放在 body 元素中
<body> <!-- Some code here --> <body onload="alert('Hello World')"> <div ></div> </body> <!-- other lines of code --> </body>
改用 body.onload 事件，通過屬性（ <body onload="myFn()"> ... ）或通過在 Javascript 中綁定事件。 這在jQuery 中非常常見：
$(document).ready(function() {
doSomething($('#myDiv'));
});
您不能在 div 上添加事件 onload，但您可以添加 onkeydown 並在文檔加載時觸發 onkeydown 事件
$(function () { $(".ccsdvCotentPS").trigger("onkeydown"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div onkeydown="setCss( );"> </div>`
嘗試這個。
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"); }
<div id="div"></div>
如何使用 jquery 或 javascript 將 onload 事件添加到 div？
[英]How to add onload event to a div using jquery or javascript?
如何將onload（）事件添加到laravel的@section（'content'）中
[英]How to add onload() event into @section('content') of laravel
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.