คุณจะเพิ่มonloadกิจกรรมในองค์ประกอบได้อย่างไร
ฉันสามารถใช้:
<div onload="oQuickReply.swap();" ></div>สำหรับสิ่งนี้?
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>... ดังนั้นจึงไม่ปิดกั้นการโหลดเนื้อหาต่อไปนี้
</body>ทั้งนี้ขึ้นอยู่กับการใช้งานมันก็ไม่ได้ดีกว่าที่จะใส่ไว้ในด้านหน้าของ fe ถ้าคุณต้องการซ่อน<div>เฉพาะเมื่อเปิดใช้งานจาวาสคริปต์ แต่หลีกเลี่ยง "กระพริบ" เวลาการมองเห็นขึ้นอยู่กับระยะเวลาที่เบราว์เซอร์ต้องการโหลด / แยกวิเคราะห์สคริปต์แบบอินไลน์ / ภายนอกทั้งหมด
onload
onloadเหตุการณ์เท่านั้นที่สามารถใช้กับdocument(body)ตัวเอง, กรอบ, ภาพ, และสคริปต์ กล่าวอีกนัยหนึ่งสามารถแนบกับเนื้อความและ / หรือทรัพยากรภายนอกแต่ละรายการเท่านั้น div ไม่ใช่ทรัพยากรภายนอกและถูกโหลดเป็นส่วนหนึ่งของเนื้อหาดังนั้นonloadเหตุการณ์จึงไม่มีผล
onloadใช้งานไม่ได้<script>หากไม่มีsrcแอตทริบิวต์ HTML (ฉันพยายามใช้คำแนะนำนี้ในสคริปต์แบบอินไลน์และพบว่าไม่ทำงาน)
คุณสามารถเรียก js บางอย่างโดยอัตโนมัติในองค์ประกอบ IMG โดยใช้ onerror และไม่มี src
<img src onerror='alert()'>เหตุการณ์ onload รองรับเฉพาะกับแท็กบางอย่างดังแสดงด้านล่าง
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>นี่คือการอ้างอิงสำหรับเหตุการณ์ onload
ลองนี้สิ! และไม่เคยใช้ทริกเกอร์สองครั้งใน div!
คุณสามารถกำหนดฟังก์ชั่นการโทรก่อนแท็ก div
$(function(){
$('div[onload]').trigger('onload');
});DEMO: jsfiddle
onload) จากนั้นเรียกใช้ฟังก์ชันเหล่านั้น สคริปต์ทำงานแม้ว่าคุณจะเปลี่ยนแอตทริบิวต์อย่างอื่นที่ไม่ใช่onloadเช่นjsfiddle.net/mrszgbxh
ฉันต้องการเพิ่มที่นี่ว่าถ้าใครต้องการเรียกใช้ฟังก์ชั่นในเหตุการณ์โหลดของ 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>เราสามารถใช้ 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 ข้าพเจ้ากำลังมองหาวิธีการที่จะสร้าง (สมมุติบริการ) onparse EventListenerสำหรับที่ไม่ได้ใช้<elements>onload
(ที่สมมุติ) onparse EventListenerจะต้องสามารถฟังเมื่อองค์ประกอบที่จะแยก
ฉันค่อนข้างมีความสุขกับความพยายามครั้งที่สองด้านล่าง แต่มันทำให้ฉันรู้สึกว่าฉันสามารถทำให้รหัสสั้นลงและง่ายขึ้นโดยการสร้างเหตุการณ์ที่ปรับแต่งเอง:
let parseEvent = new Event('parse');นี่เป็นทางออกที่ดีที่สุด
ตัวอย่างด้านล่าง:
parse Eventwindow.onloadเวลาใดก็ได้) ซึ่ง:
data-onparseparse 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'สดใสไม่มีภาพสับ ) ใช้ hardcoded<img />และทำงาน
ฉันคิดว่ามันควรจะเป็นไปได้ที่จะลบ hardcoded <img />ทั้งหมดและแบบไดนามิกเท่านั้นหลังจากการตรวจสอบในองค์ประกอบที่จำเป็นในการยิงonparseเหตุการณ์คุณลักษณะเช่น:
data-onparse="run-oQuickReply.swap()"มันกลับกลายเป็นว่าทำงานได้ดีมากอย่างแน่นอน
ตัวอย่างด้านล่าง:
data-onparse<img src />และผนวกเข้ากับเอกสารแบบไดนามิกทันทีหลังจากแต่ละองค์ประกอบเหล่านั้นonerror EventListenerเมื่อเอ็นจิ้นการเรนเดอร์วิเคราะห์คำแยกกัน<img src />Callback และลบที่สร้างขึ้นแบบไดนามิก<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) - ซึ่งเป็นเพื่อให้ห่างไกลวิธีที่ดีที่สุดที่ฉันต้องเจอ
ตัวอย่างด้านล่าง:
onerror EventListenerเมื่อเอ็นจิ้นการเรนเดอร์วิเคราะห์คำ<img src />Callback และลบออก<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>ฉันต้องการให้มีการเริ่มทำงานโค้ดเริ่มต้นหลังจากแทรก hunk (เทมเพลตอินสแตนซ์) เป็นก้อนและแน่นอนว่าฉันไม่สามารถเข้าถึงโค้ดที่ใช้งานเทมเพลตและปรับเปลี่ยน DOM แนวคิดเดียวกันนี้มีไว้สำหรับการแก้ไขบางส่วนของ DOM โดยการแทรกองค์ประกอบ html ซึ่งโดยปกติจะเป็น<div>ปกติ
ก่อนหน้านี้ฉันเคยแฮ็คด้วยเหตุการณ์ onload ที่มองไม่เห็นเกือบจะ<img>อยู่ใน a <div>แต่ค้นพบว่าสไตล์ที่ว่างเปล่าและมีขอบเขตจะทำ:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>อัพเดท (15 ก.ค. 2017) - <style>ไม่รองรับ onload ใน IE เวอร์ชันล่าสุด Edge สนับสนุน แต่ผู้ใช้บางคนเห็นว่านี่เป็นเบราว์เซอร์ที่แตกต่างและติดกับ IE <img>องค์ประกอบดูเหมือนว่าจะทำงานดีขึ้นในเบราว์เซอร์
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>เพื่อลดผลกระทบต่อภาพและการใช้ทรัพยากรของภาพให้ใช้ inline 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>ฉันชอบห้องสมุด YUI3 มากสำหรับสิ่งนี้
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onloadเพื่อการถ่ายโอนข้อมูลบนหน้าเพื่อประโยชน์ในการผูกพันเดียว
ฉันกำลังเรียนรู้จาวาสคริปต์และ jquery และได้ผ่านคำตอบทั้งหมดฉันประสบปัญหาเดียวกันเมื่อเรียกใช้ฟังก์ชันจาวาสคริปต์สำหรับการโหลดองค์ประกอบ div ฉันพยายาม$('<divid>').ready(function(){alert('test'})แล้วมันก็ใช้ได้ผลสำหรับฉัน ฉันต้องการทราบว่าเป็นวิธีที่ดีในการดำเนินการเรียกใช้ onload ในองค์ประกอบ div ในวิธีที่ฉันใช้ jquery selector
ขอบคุณ
ตามที่ได้กล่าวไปแล้วคุณไม่สามารถใช้เหตุการณ์ onLoad บน DIV แทนได้ แต่จะอยู่ด้านหน้าแท็กเนื้อหา
แต่ในกรณีที่คุณมีไฟล์ส่วนท้ายหนึ่งไฟล์และรวมไว้ในหลาย ๆ หน้า ควรตรวจสอบก่อนว่า div ที่คุณต้องการอยู่ในหน้านั้นปรากฏขึ้นหรือไม่ดังนั้นโค้ดจะไม่ทำงานในหน้าเว็บที่ไม่มี DIV นั้นเพื่อให้โหลดได้เร็วขึ้นและประหยัดเวลาสำหรับแอปพลิเคชันของคุณ
ดังนั้นคุณจะต้องให้ ID DIV นั้นและทำ:
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 สองเหตุการณ์คือ mouseover และ mouseout จากนั้นด้านล่าง Div ฉันวางลิงก์เพื่อเปิด Div และให้ลิงค์นั้นเป็นกิจกรรมสำหรับ onclick กิจกรรมทั้งหมดเหมือนกันทุกประการเพื่อให้หน้าเลื่อนลงไปด้านล่างสุดของหน้า ตอนนี้เมื่อมีการคลิกปุ่มเพื่อเปิด Div หน้าดังกล่าวจะกระโดดลงมาทางส่วนหนึ่งและ Div จะเปิดขึ้นเหนือปุ่มทำให้เหตุการณ์วางเมาส์และวางเมาส์เพื่อช่วยผลักสคริปต์เลื่อนลง จากนั้นการเคลื่อนไหวใด ๆ ของเมาส์ ณ จุดนั้นจะทำให้สคริปต์เป็นครั้งสุดท้าย
คุณสามารถใช้ช่วงเวลาเพื่อตรวจสอบจนกว่ามันจะโหลดเช่นนี้: 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);ก่อนอื่นให้ตอบคำถามของคุณ: ไม่คุณทำไม่ได้ไม่เหมือนที่คุณอยากทำ อาจจะสายไปสักหน่อย แต่นี่เป็นวิธีแก้ปัญหาของฉันโดยไม่มี jQuery, javascript ล้วนๆ เดิมทีมันถูกเขียนขึ้นเพื่อใช้ฟังก์ชั่นปรับขนาดให้กับ textareas หลังจากโหลด DOM และในการกดคีย์
เช่นเดียวกับที่คุณสามารถใช้เพื่อทำอะไรกับ 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 คุณสามารถใช้แฮ็คที่มีประโยชน์มากซึ่งเข้าใจได้ง่ายว่าคุณจะพบว่า... กำลังทำงานกับ - องค์ประกอบก่อน-the-Dom เป็นพร้อม ... มันบอกว่า "ก่อนที่ 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); }
}จาวาสคริปต์
document.addEventListener("animationstart", function(event) {
var e = event || window.event;
if (e.animationName == "nodeReady") {
e.target.classList.remove('loaded');
do_something_else();
}
}, false);เมื่อคุณโหลด html บางตัวจากเซิร์ฟเวอร์และแทรกลงในทรี DOM คุณสามารถใช้ DOMSubtreeModifiedอย่างไรก็ตามมันเลิกใช้แล้วดังนั้นคุณสามารถใช้MutationObserverหรือตรวจหาเนื้อหาใหม่ภายในฟังก์ชั่น loadElement โดยตรงดังนั้นคุณไม่จำเป็นต้องรอเหตุการณ์ DOM
คุณสามารถแนบฟังเหตุการณ์ดังต่อไปนี้ มันจะทริกเกอร์เมื่อใดก็ตามที่ div ที่มีตัวเลือก#my-idโหลดไปยัง DOM อย่างสมบูรณ์
$(document).on('EventName', '#my-id', function() {
// do something
});ในกรณีนี้ EventName อาจเป็น 'โหลด' หรือ 'คลิก'
ลองสิ่งนี้
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>alert("This is a div.");จะถูกเรียกเมื่อบรรทัดนี้จะถูกดำเนินการและผลที่ได้ (ซึ่งเป็นundefined) div.onloadได้รับมอบหมายให้ ซึ่งไม่มีจุดหมายอย่างสมบูรณ์
คุณไม่สามารถเพิ่มเหตุการณ์ onload บน div แต่คุณสามารถเพิ่ม 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>`
bodyดีกว่าdiv