Làm thế nào để bạn thêm một onload sự kiện cho một yếu tố?
Tôi có thể sử dụng:
<div onload="oQuickReply.swap();" ></div>cho cái này
divcác phần tử không "tải".
Câu trả lời:
Không, bạn không thể. Cách dễ nhất để làm cho nó hoạt động là đặt lệnh gọi hàm trực tiếp sau phần tử
Thí dụ:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...hoặc - thậm chí tốt hơn - ngay trước mặt </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>... Vì vậy, nó không chặn nội dung sau đây tải.
</body>. Nếu bạn muốn ẩn <div>chỉ khi javascript được bật nhưng tránh "flash". Thời gian hiển thị tùy thuộc vào thời gian trình duyệt cần tải / phân tích tất cả các tập lệnh nội tuyến / bên ngoài.
onload
Sự onloadkiện chỉ có thể được sử dụng trên document(body)chính nó, khung, hình ảnh và tập lệnh. Nói cách khác, nó chỉ có thể được gắn vào thân và / hoặc mỗi tài nguyên bên ngoài . Div không phải là tài nguyên bên ngoài và nó được tải như một phần của cơ thể, vì vậy onloadsự kiện không được áp dụng ở đó.
onloadđó không hoạt động trên bất kỳ thuộc tính nào <script>mà không có srcthuộc tính HTML (Tôi đã cố gắng sử dụng lời khuyên này trong tập lệnh nội tuyến và thấy nó không hoạt động)
Bạn có thể tự động kích hoạt một số js trên phần tử IMG bằng cách sử dụng onerror và không có src.
<img src onerror='alert()'>sự kiện onload nó chỉ hỗ trợ với một vài thẻ như được liệt kê dưới đây.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>Ở đây tham chiếu cho sự kiện onload
Thử cái này! Và không bao giờ sử dụng kích hoạt hai lần trên div!
Bạn có thể xác định chức năng để gọi trước thẻ div.
$(function(){
$('div[onload]').trigger('onload');
});DEMO: jsfiddle
onload) và sau đó gọi các hàm đó. Các kịch bản làm việc ngay cả khi bạn thay đổi các thuộc tính để một cái gì đó khác hơn onloadví dụ jsfiddle.net/mrszgbxh
Tôi chỉ muốn thêm vào đây rằng nếu bất kỳ ai muốn gọi một hàm khi tải sự kiện của div & bạn không muốn sử dụng jQuery (do xung đột như trong trường hợp của tôi) thì chỉ cần gọi một hàm sau tất cả mã html hoặc bất kỳ mã khác bạn đã viết bao gồm mã chức năng và chỉ cần gọi một chức năng.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>HOẶC LÀ
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>chúng ta có thể sử dụng MutingObserver để giải quyết vấn đề theo cách hiệu quả khi thêm mã mẫu bên dưới
<!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>Trong tháng 11 năm 2019, tôi đang tìm kiếm một cách để tạo ra một (giả) onparse EventListenercho <elements>mà không dùng onload.
(Giả thuyết) onparse EventListenerphải có khả năng lắng nghe khi một phần tử được phân tích cú pháp .
Tôi khá hài lòng với lần thử thứ hai bên dưới, nhưng tôi nhận ra rằng tôi có thể làm cho mã ngắn hơn và đơn giản hơn, bằng cách tạo một sự kiện được thiết kế riêng:
let parseEvent = new Event('parse');Đây là giải pháp tốt nhất chưa.
Ví dụ dưới đây:
parse Eventwindow.onloadbất cứ lúc nào):
data-onparseparse EventListener với từng yếu tốparse Eventtừng phần tử để thực thiCallbackVí dụ làm việc:
// 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>Các nỗ lực đầu tiên dưới đây (dựa trên @JohnWilliams'rực rỡ rỗng Hình ảnh Hack ) sử dụng một hardcoded<img /> và làm việc.
Tôi nghĩ rằng nên loại bỏ <img />hoàn toàn mã hóa cứng và chỉ tự động chèn nó sau khi phát hiện, trong một yếu tố cần thiết để khởi động một onparsesự kiện, một thuộc tính như:
data-onparse="run-oQuickReply.swap()"Hóa ra, điều này thực sự hoạt động rất tốt.
Ví dụ dưới đây:
data-onparse<img src /> và thêm nó vào tài liệu, ngay sau mỗi yếu tố đóonerror EventListenerkhi công cụ kết xuất phân tích cú pháp mỗi<img src />Callback và loại bỏ mà được tạo động <img src />từ tài liệuVí dụ làm việc:
// 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>Tôi có thể xây dựng trên @JohnWilliams' <img src>hack (trên trang này, từ năm 2017) - đó là, cách tiếp cận tốt nhất mà tôi đã gặp.
Ví dụ dưới đây:
onerror EventListenerkhi công cụ kết xuất phân tích cú pháp<img src />Callback và xóa <img src />khỏi tài liệuVí dụ làm việc:
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 />sử dụng iframe và ẩn iframe hoạt động như thẻ 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>Tôi cần phải có một số mã khởi tạo chạy sau khi một đoạn html (ví dụ mẫu) được chèn và tất nhiên tôi không có quyền truy cập vào mã thao tác với mẫu và sửa đổi DOM. Ý tưởng tương tự cho bất kỳ sửa đổi một phần nào của DOM bằng cách chèn một phần tử html, thường là a <div>.
Cách đây một thời gian, tôi đã thực hiện một vụ hack với sự kiện onload gần như vô hình <img>có trong một <div>, nhưng phát hiện ra rằng một phong cách trống rỗng, có phạm vi cũng sẽ làm:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Cập nhật (ngày 15 tháng 7 năm 2017) - Tải <style>không được hỗ trợ trong phiên bản IE cuối cùng. Edge không hỗ trợ nó, nhưng một số người dùng xem đây là một trình duyệt khác và gắn bó với IE. Các <img>yếu tố dường như hoạt động tốt hơn trên tất cả các trình duyệt.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>Để giảm thiểu tác động trực quan và việc sử dụng tài nguyên của hình ảnh, hãy sử dụng một src nội tuyến để giữ cho nó nhỏ và trong suốt.
Một nhận xét tôi cảm thấy cần phải thực hiện khi sử dụng a <script>là việc xác định <div>tập lệnh gần như khó hơn bao nhiêu , đặc biệt là trong việc tạo khuôn mẫu nơi bạn không thể có một id giống hệt nhau trong mỗi phiên bản mà mẫu tạo ra. Tôi nghĩ rằng câu trả lời có thể là document.civerseScript, nhưng điều này không được hỗ trợ phổ biến. Một <script>phần tử không thể xác định vị trí DOM của chính nó một cách đáng tin cậy; một tham chiếu đến 'cái này' chỉ vào cửa sổ chính và không có ích gì.
Tôi tin rằng nó là cần thiết để giải quyết cho việc sử dụng một <img>yếu tố, mặc dù là ngớ ngẩn. Đây có thể là một lỗ hổng trong khung DOM / javascript có thể sử dụng cắm.
Vì onloadsự kiện chỉ được hỗ trợ trên một vài yếu tố, bạn phải sử dụng một phương pháp thay thế.
Bạn có thể sử dụng M mutObserver cho việc này:
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>Tôi thực sự thích thư viện YUI3 cho loại điều này.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
Tôi đang học javascript và jquery và đã trải qua tất cả câu trả lời, tôi gặp phải vấn đề tương tự khi gọi hàm javascript để tải phần tử div. Tôi đã thử $('<divid>').ready(function(){alert('test'})và nó làm việc cho tôi. Tôi muốn biết đây là cách tốt để thực hiện cuộc gọi onload trên phần tử div theo cách tôi đã sử dụng bộ chọn jquery.
cảm ơn
Như đã nói, bạn không thể sử dụng sự kiện onLoad trên DIV mà thay vào đó là trước thẻ body.
nhưng trong trường hợp bạn có một tệp chân trang và đưa nó vào nhiều trang. Trước tiên, nên kiểm tra xem div bạn muốn có trên trang đó được hiển thị hay không, vì vậy mã không được thực thi trong các trang không chứa DIV đó để làm cho nó tải nhanh hơn và tiết kiệm thời gian cho ứng dụng của bạn.
vì vậy bạn sẽ cần cung cấp cho DIV ID đó và thực hiện:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}Tôi đã có cùng một câu hỏi và đang cố gắng để Div tải một tập lệnh cuộn, sử dụng onload hoặc load. Vấn đề tôi tìm thấy là nó sẽ luôn hoạt động trước khi Div có thể mở, không phải trong hoặc sau, vì vậy nó sẽ không thực sự hoạt động.
Sau đó, tôi đã đưa ra điều này như là một công việc xung quanh.
<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>Tôi đặt Div bên trong Span và đưa cho Span hai sự kiện, di chuột và rê chuột. Sau đó, bên dưới Div đó, tôi đã đặt một liên kết để mở Div và đưa liên kết đó một sự kiện cho onclick. Tất cả các sự kiện giống hệt nhau, để làm cho trang cuộn xuống cuối trang. Bây giờ khi nhấp vào nút để mở Div, trang sẽ nhảy xuống một phần và Div sẽ mở phía trên nút, khiến các sự kiện rê chuột và rê chuột giúp đẩy tập lệnh cuộn xuống. Sau đó, bất kỳ chuyển động của chuột tại thời điểm đó sẽ đẩy kịch bản một lần cuối cùng.
Bạn có thể sử dụng một khoảng để kiểm tra nó cho đến khi nó tải như thế này: 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);Đầu tiên để trả lời câu hỏi của bạn: Không, bạn không thể, không trực tiếp như bạn muốn làm như vậy. Có thể hơi muộn để trả lời, nhưng đây là giải pháp của tôi, không có jQuery, javascript thuần túy. Ban đầu nó được viết để áp dụng chức năng thay đổi kích thước cho textareas sau khi DOM được tải và trên keyup.
Tương tự như cách bạn có thể sử dụng nó để làm một cái gì đó với (tất cả) div hoặc chỉ một, nếu được chỉ định, như vậy:
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);
});Nếu bạn thực sự cần phải làm gì đó với div, được tải sau khi DOM được tải, ví dụ: sau cuộc gọi ajax, bạn có thể sử dụng một bản hack rất hữu ích, rất dễ hiểu bạn sẽ thấy nó ... hoạt động với- yếu tố-trước-the-dom-là-ready ... . Nó nói "trước khi DOM sẵn sàng" nhưng nó hoạt động rực rỡ theo cùng một cách, sau khi chèn ajax hoặc js-appendChild - bất cứ thứ gì của div. Đây là mã, với một số thay đổi nhỏ cho nhu cầu của tôi.
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);Khi bạn tải một số html từ máy chủ và chèn nó vào cây DOM, bạn có thể sử dụng DOMSubtreeModifiedtuy nhiên nó không được dùng nữa - vì vậy bạn có thể sử dụng MutationObserverhoặc chỉ phát hiện trực tiếp nội dung mới bên trong hàm loadE bổ sung, do đó bạn sẽ không cần phải chờ các sự kiện DOM
Bạn có thể đính kèm một người nghe sự kiện như dưới đây. Nó sẽ kích hoạt bất cứ khi nào div có bộ chọn #my-idtải hoàn toàn vào DOM.
$(document).on('EventName', '#my-id', function() {
// do something
});Trường hợp quốc tế EventName có thể là 'tải' hoặc 'nhấp'
Thay vào đó, hãy sử dụng sự kiện body.onload, thông qua thuộc tính ( <body onload="myFn()"> ...) hoặc bằng cách ràng buộc một sự kiện trong Javascript. Điều này cực kỳ phổ biến với jQuery :
$(document).ready(function() {
doSomething($('#myDiv'));
});Thử cái này.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Hãy thử cái này quá. Bạn cần phải loại bỏ .từ oQuickReply.swap()để làm cho chức năng làm việc.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");được gọi khi dòng này được thực thi và kết quả (được undefined) được gán cho div.onload. Mà là hoàn toàn vô nghĩa.
Bạn không thể thêm sự kiện onload trên div, nhưng bạn có thể thêm sự kiện onkeydown và kích hoạt sự kiện onkeydown khi tải tài liệu
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodytốt hơndiv