У JavaScript ця подія може застосовуватися для запуску певної функції, коли сторінка повністю відображається. Його також можна використовувати для перевірки типу та версії браузера відвідувача. Ми можемо перевірити, які файли cookie використовує сторінка, використовуючи onload атрибут.
У HTML атрибут onload спрацьовує, коли об’єкт завантажено. Метою цього атрибута є виконання сценарію під час завантаження відповідного елемента.
У HTML, onload Атрибут зазвичай використовується з елемент для виконання сценарію після повного завантаження вмісту (включаючи файли CSS, зображення, сценарії тощо) веб-сторінки. Не обов'язково використовувати його лише з тегом, оскільки його можна використовувати з іншими елементами HTML.
Різниця між document.onload і window.onload це: document.onload запускає перед завантаженням зображень та іншого зовнішнього вмісту. Вистрілюється перед window.onload . У той час як window.onload запускається, коли завантажується вся сторінка, включаючи файли CSS, файли сценаріїв, зображення тощо.
дорівнює java
Синтаксис
window.onload = fun()
Розберемо цю подію на прикладах.
Приклад1
У цьому прикладі є елемент div з висотою 200 пікселів і шириною 200 пікселів. Тут ми використовуємо window.onload() щоб змінити колір фону, ширину та висоту див після завантаження веб-сторінки.
Колір фону встановлено 'червоний' , а для ширини та висоти встановлено значення 300 пікселів кожен.
window.onload() #bg{ width: 200px; height: 200px; border: 4px solid blue; } window.onload = function(){ document.getElementById('bg').style.backgroundColor = 'red'; document.getElementById('bg').style.width = '300px'; document.getElementById('bg').style.height = '300px'; } <h2> This is an example of window.onload() </h2> Перевірте зараз Вихід
заміна js
Після виконання коду та завантаження сторінки результатом буде -
Приклад 2
У цьому прикладі ми реалізуємо просту анімацію за допомогою властивостей об’єкта DOM і функцій javascript . Ми використовуємо функція JavaScript getElementById() для отримання об’єкта DOM, а потім призначити цей об’єкт глобальній змінній.
q1 q2 q3 q4
var img = null; function init(){ img = document.getElementById('myimg'); img.style.position = 'relative'; img.style.left = '50px'; } function moveRight(){ img.style.left = parseInt( img.style.left) + 100 + 'px'; } window.onload = init; <p>Click the below button to move the image right</p> Перевірте зараз Вихід
Після успішного виконання наведеного вище коду результатом буде -
Тепер є приклад, у якому ми будемо використовувати HTML onload атрибут і функції JavaScript.
bin до bcd
Приклад3
Це простий приклад використання HTML onload атрибут із функцією, визначеною в JavaScript. У цьому прикладі сповіщення() функція викликається кожного разу, коли оновлюється документ.
function fun() { alert('Hello World!!, Welcome to the javaTpoint.com'); } <p> Try to refresh the document to see the effect. </p> Перевірте зараз Вихід
Після виконання наведеного вище коду результатом буде -
