Як додати 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>єдине, якщо JavaScript увімкнено, але уникайте "миготіння". Час видимості залежить від того, як довго браузер повинен завантажувати / аналізувати всі вбудовані / зовнішні сценарії.
onload
onloadПодія може бути використано тільки на document(body)сам, рамки, зображення і скрипти. Іншими словами, він може бути приєднаний лише до органу та / або кожного зовнішнього ресурсу . Div не є зовнішнім ресурсом і завантажується як частина тіла, тому onloadподія там не застосовується.
onloadне працює жоден <script>без srcатрибута HTML (я намагався використовувати цю пораду в вбудованому сценарії, і виявив, що він не працює)
Ви можете запустити деякі js автоматично на елементі IMG за допомогою onerror, а не src.
<img src onerror='alert()'>події завантаження він підтримує лише з кількома тегами, як перелічено нижче.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>Тут посилання на подію onload
Спробуйте це! І ніколи не використовуйте тригер двічі на діві!
Ви можете визначити функцію для виклику перед тегом 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"Блискучий Empty Image Hack ) використовувала зашита <img />і працював.
Я подумав, що має бути можливо повністю видалити жорсткий код <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 та приховайте його, якщо кадр працює як тег тіла
<!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. Ця ж ідея стосується будь-якої часткової модифікації DOM шляхом вставки html-елемента, як правило, a <div>.
Деякий час тому я зробив хак з події завантаження майже невидимого, що <img>міститься в <div>, але виявив, що масштабний, порожній стиль також буде робити:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Оновлення (15 липня 2017 р.) - завантаження <style>не підтримується в останній версії IE. Edge це підтримує, але деякі користувачі бачать це як інший браузер і дотримуються IE. <img>Елемент , здається, краще працювати у всіх браузерах.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>Щоб мінімізувати візуальний вплив та використання ресурсів зображення, використовуйте вбудований src, який зберігає його невеликим та прозорим.
Один коментар, який я думаю, що мені потрібно зробити щодо використання a, <script>- наскільки складніше визначити, який <div>сценарій знаходиться поруч, особливо в шаблонах, коли ви не можете мати ідентичний ідентифікатор у кожному екземплярі, який генерує шаблон. Я думав, що відповідь може бути document.currentScript, але це не підтримується повсюдно. <script>Елемент не може визначити своє власне місце розташування DOM надійно; посилання на "це" вказує на головне вікно і не допомагає.
Я вважаю, що потрібно погодитися з використанням <img>елемента, незважаючи на те, що вони є "goofy". Це може бути дірка в рамках 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')
})Дивіться: http://developer.yahoo.com/yui/3/event/#onavailable
onload.
Я вивчаю javascript та jquery і пережив усю відповідь, я зіткнувся з тією ж проблемою, коли викликав функцію javascript для завантаження елемента element. Я спробував, $('<divid>').ready(function(){alert('test'})і це спрацювало на мене. Я хочу знати, чи це хороший спосіб виконувати виклик завантаження на елемент div так, як я це робив за допомогою селектора jquery.
Дякую
Як все сказано, ви не можете використовувати onLoad подію на DIV, але це перед тегом body.
але у випадку, якщо у вас є один колонтитул і включіть його на багато сторінок. краще спочатку перевірити, чи потрібний div на цій сторінці відображається, щоб код не виконувався на сторінках, які не містять цей DIV, щоб швидше завантажувався та економив час для вашої програми.
тож вам потрібно буде вказати ідентифікатору 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 дві події, миші та миші. Потім під цим 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. Спочатку було написано, щоб застосувати функцію зміни розміру до текстових областей після завантаження DOM та під час клавіатури.
Таким же чином, ви можете використовувати його, щоб зробити щось із (усіма) divs або лише одним, якщо вказано, як-от так:
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);
});Якщо вам дійсно потрібно щось зробити з дівом, завантаженим після завантаження DOM, наприклад, після виклику Ajax, ви можете використовувати дуже корисний хак, який легко зрозуміти, ви знайдете його ... елементи, перед тим , в-будинок-це готовий ... . Він говорить "до того, як DOM буде готовий", але це працює надзвичайно таким же чином, після вставки Ajax або js-appendChild - що б не було з дива. Ось код, із деякими крихітними змінами до моїх потреб.
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);Коли ви завантажуєте якийсь 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