Как добавить событие onload к элементу div? - PullRequest
198 голосов
/ 30 октября 2010

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

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

для этого?

Ответы [ 20 ]

0 голосов
/ 07 февраля 2019

Сначала ответьте на ваш вопрос: Нет, вы не можете, не так, как вы хотели. Может быть, немного поздно, чтобы ответить, но это мое решение, без 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. Вот код с некоторыми небольшими изменениями в моих потребностях.

1010 * 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);
0 голосов
/ 09 июля 2018

Вы можете использовать интервал для проверки, пока он не загрузится так: 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);
0 голосов
/ 29 марта 2018

Попробуйте это.

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>
0 голосов
/ 04 декабря 2017

У меня был тот же вопрос, и я пытался заставить 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 откроется над кнопкой, вызывая события mouseover и mouseout, помогающие продвинуть скрипт прокрутки вниз. Тогда любое движение мыши в этой точке будет толкать скрипт в последний раз.

0 голосов
/ 19 октября 2017

Как уже говорилось, вы не можете использовать событие onLoad вместо DIV, но перед тегом body.

, но в случае, если у вас есть один файл нижнего колонтитула и вы включаете его на многих страницах.лучше сначала проверить, отображается ли нужный div на той странице, чтобы код не выполнялся на страницах, не содержащих этот DIV, чтобы он загружался быстрее и экономил время для вашего приложения.

, поэтому вам нужно будет присвоить этому DIV ID и сделать:

var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
0 голосов
/ 26 мая 2016

Вы не можете добавить событие 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>`
0 голосов
/ 11 марта 2019

Поскольку событие 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>
0 голосов
/ 26 февраля 2017

Я изучаю javascript и jquery и изучаю все ответы, Я столкнулся с той же проблемой при вызове функции JavaScript для загрузки элемента Div. Я попробовал $('<divid>').ready(function(){alert('test'}), и у меня это сработало. Я хочу знать, это хороший способ выполнить вызов onload элемента div так же, как я использовал селектор jquery.

спасибо

0 голосов
/ 08 апреля 2019

Когда вы загружаете 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>
0 голосов
/ 30 октября 2010

Вместо этого используйте событие body.onload, либо через атрибут (<body onload="myFn()"> ...), либо связав событие в Javascript.Это очень часто встречается с jQuery :

$(document).ready(function() {
    doSomething($('#myDiv'));
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...