Как добавить событие onload к элементу? Могу ли я использовать:
<div onload="oQuickReply.swap();" ></div>
за это?
Как добавить событие onload в элемент div?
Ответ 1
Нет, вы не можете. Самый простой способ заставить его работать - это вызвать вызов функции непосредственно после элемента
Пример:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
или - еще лучше - перед </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
... поэтому он не блокирует загрузку следующего содержимого.
Ответ 2
Событие onload может использоваться только для самого document(body), фреймов, изображений и сценариев. Другими словами, он может быть привязан только к телу и/или к каждому внешнему ресурсу. Div не является внешним ресурсом и загружается как часть тела, поэтому событие onload там не применяется.
Ответ 3
Вы можете запускать некоторые js автоматически на элементе IMG, используя onerror, и без src.
<img src onerror='alert()'>
Ответ 4
onload event поддерживает только несколько тегов, как показано ниже.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
Здесь ссылка на событие onload
Ответ 5
Попробуйте это! И никогда не используйте триггер дважды в div!
Вы можете определить функцию для вызова перед тегом div.
$(function(){
$('div[onload]').trigger('onload');
});
DEMO: jsfiddle
Ответ 6
Я просто хочу добавить здесь, что если кто-то хочет вызвать функцию при событии загрузки 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>
Ответ 7
использовать 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>
Ответ 8
Мне нужно было запустить код инициализации после того, как был вставлен фрагмент html (экземпляр шаблона), и, конечно, у меня не было доступа к коду, который управляет шаблоном и изменяет DOM. Эта же идея выполняется для любой частичной модификации DOM путем вставки элемента html, обычно a <div>.
Некоторое время назад я сделал взлом с событием onload почти невидимого <img>, содержащегося в <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>
Чтобы минимизировать визуальное воздействие и использование ресурсов изображения, используйте встроенный src, который сохраняет его небольшим и прозрачным.
Один комментарий, который я чувствую, что мне нужно использовать <script>, насколько сложнее определить, какой из <div> script близок, особенно в шаблонах, где вы не можете иметь одинаковый идентификатор в каждом экземпляр, который генерирует шаблон. Я думал, что ответ может быть document.currentScript, но это не поддерживается повсеместно. Элемент <script> не может определить свое собственное местоположение DOM надежно; ссылка на 'this' указывает на главное окно и не помогает.
Я считаю, что нужно согласиться на использование элемента <img>, несмотря на то, что он тупой. Это может быть дыра в структуре DOM/javascript, которая может использовать подключение.
Ответ 9
мы можем использовать 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>
Ответ 10
Мне очень нравится библиотека 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
Ответ 11
Используйте событие body.onload вместо атрибута (<body onload="myFn()"> ...) или связывая событие в Javascript. Это чрезвычайно часто встречается с jQuery:
$(document).ready(function() {
doSomething($('#myDiv'));
});
Ответ 12
Я изучаю javascript и jquery и проходил весь ответ,
Я столкнулся с такой же проблемой при вызове функции javascript для загрузки элемента div.
Я пробовал $('<divid>').ready(function(){alert('test'}), и это сработало для меня. Я хочу знать, что это хороший способ выполнить вызов onload на элементе div так, как я использовал селектор jquery.
спасибо
Ответ 13
Как и все сказанное, вы не можете использовать событие onLoad вместо DIV, но перед тегом body.
но в случае, если у вас есть один файл нижнего колонтитула и включить его на многие страницы. лучше сначала проверить, находится ли div, который вы хотите, на этой странице, поэтому код не выполняется на страницах, которые не содержат этого DIV, чтобы ускорить загрузку и сэкономить некоторое время для вашего приложения.
поэтому вам нужно будет указать DIV ID и сделать:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
Ответ 14
У меня был такой же вопрос, и я пытался получить Div для загрузки прокрутки script, используя 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 откроется над кнопкой, в результате чего события mouseover и mouseout помогут прокрутить вниз прокрутку вниз script. Тогда любое перемещение мыши в этой точке будет в последний раз нажимать script.
Ответ 15
Попробуй это.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Ответ 16
Вы можете использовать интервал, чтобы проверить его, пока он не загрузится так: 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);
Ответ 17
Сначала ответьте на ваш вопрос: нет, вы не можете, не так, как вы хотели. Может быть, немного поздно, чтобы ответить, но это мое решение, без 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, вы можете использовать очень полезный хак, который легко понять, и вы найдете его ... работая с элементы перед домом готов. Он говорит "до того, как 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);
Ответ 18
Поскольку событие 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>Ответ 19
Когда вы загружаете 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>Ответ 20
Вы не можете добавить событие 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>`