Как добавить событие onload к элементу div? - PullRequest
Новая
       33

Как добавить событие onload к элементу div?

198 голосов
/ 30 октября 2010

Как добавить событие onload к элементу?Могу ли я использовать: 

<div onload="oQuickReply.swap();" ></div>

для этого?

Ответы [ 20 ]

216 голосов
/ 30 октября 2010

Нет, вы не можете. Самый простой способ заставить это работать - поместить вызов функции непосредственно после элемента

Пример: 

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

или - еще лучше - прямо перед </body>: 

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
</body>

... чтобы не блокировать загрузку следующего контента.

67 голосов
/ 30 октября 2010

Событие onload может использоваться только на самом document(body), кадрах, изображениях и сценариях.Другими словами, он может быть прикреплен только к телу и / или каждому внешнему ресурсу .DIV не является внешним ресурсом и загружается как часть тела, поэтому событие onload там не применяется.

47 голосов
/ 17 января 2017

Вы можете автоматически запускать некоторые js для элемента IMG, используя onerror, и без src. 

<img src onerror='alert()'>
20 голосов
/ 16 декабря 2016

Событие onload, которое поддерживается только с несколькими тегами, как указано ниже. 

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Здесь ссылка для события загрузки

15 голосов
/ 05 марта 2016

Попробуй это! И никогда не используйте триггер дважды на div!

Вы можете определить функцию для вызова перед тегом div. 

$(function(){
    $('div[onload]').trigger('onload');
});

ДЕМО: jsfiddle

9 голосов
/ 17 октября 2012

Я просто хочу добавить, что если кто-то хочет вызвать функцию при загрузке события div и вы не хотите использовать jQuery (из-за конфликта, как в моем случае), тогда просто вызовите функцию после всего HTML код или любой другой код, который вы написали, включая код функции и просто вызовите функцию. 

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

OR 

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>
6 голосов
/ 08 декабря 2016

использовать 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>
5 голосов
/ 17 марта 2017

Мне нужно было запустить некоторый код инициализации после вставки фрагмента html (экземпляра шаблона), и, конечно, у меня не было доступа к коду, который манипулирует шаблоном и модифицирует DOM.Та же идея применима для любой частичной модификации DOM путем вставки html-элемента, обычно <div>.

. Некоторое время назад я взломал событие onload почти невидимого <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, который делает его небольшим и прозрачным.

Один комментарий, который мне нужно сделать для использования <script>, заключается в том, насколько труднее определить, какой <div> сценарий находится рядом, особенно в шаблонах, где вы не можете иметь идентичный идентификатор в каждом экземпляре шаблонагенерирует.Я думал, что ответ может быть document.currentScript, но это не всегда поддерживается.Элемент <script> не может надежно определить свое собственное местоположение DOM;ссылка на «это» указывает на главное окно и не помогает.

Я считаю, что необходимо согласиться на использование элемента <img>, несмотря на глупость.Это может быть дыра в платформе DOM / javascript, в которой может использоваться подключение.

4 голосов
/ 09 сентября 2013

мы можем использовать 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>
2 голосов
/ 30 октября 2010

Мне действительно нравится библиотека 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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...