Добавить несколько событий window.onload

HTML 5. Асинхронная загрузка JavaScript

Стандарт HTML 5 поддерживает асинхронную загрузку JavaScript. Это можно сделать путем добавления ключевого слова async или defer. Например:

<script src="URL_скрипта" type="text/javascript" async></script>
<script src="URL_скрипта" type="text/javascript" defer></script>

В обеих вариантах загрузка javascript будет асинхронной. Разница состоит только в начале времени выполнения скрипта.

Скрипт, который подключен с атрибутом defer выполнится не нарушая порядок выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но перед тем, как вызовется DOMContentLoaded.

Скрипт, который подключен с атрибутом async выполнится при первой возможности после полной загрузки, но при этом не ожидает окончания парсинга документа и до загрузки объекта window. Браузеры не гарантируют выполнение скриптов в том же порядке в котором они подключены.

3 ответа

Javascript: window location

Лучший ответ

Блокировщики всплывающих окон обычно не допускают всплывающие окна (или программный щелчок по динамически создаваемым гиперссылкам и т. Д.), Если не вызывается прямым действием пользователя. Каждый браузер имеет немного другой механизм блокировки всплывающих окон.

В вашем случае 1 сначала весь код запускается в основном потоке в результате нажатия пользователем кнопки экспорта. Это отлично работает.

В случае 2 открытие окна может работать не во всех браузерах, поскольку оно вызывается из другого потока. Обработчик успеха Ajax будет вызываться асинхронно еще долго после завершения события onclick.

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

Реализация приведенных выше предложений может помочь решить вашу проблему, поскольку не запускается, но есть еще одно улучшение, которое можно внести — добавление обработчика перед навигацией:

Или даже лучше добавить его в основной теме, сразу после

Надеюсь, поможет.

Andrew O.
30 Янв 2019 в 04:45

Рассмотрите возможность использования iframe для этого. Это совершенно правильное решение, которое исключает необходимость прослушивания другого события окна, что является плохой практикой и не требуется.

Shahar
31 Янв 2019 в 09:18

Попробуй это?

Andrejs Gubars
29 Янв 2019 в 11:29

readyState

Как добавить несколько публикаций в инстаграм в историю и с компа

What happens if we set the handler after the document is loaded?

Naturally, it never runs.

There are cases when we are not sure whether the document is ready or not. We’d like our function to execute when the DOM is loaded, be it now or later.

The property tells us about the current loading state.

There are 3 possible values:

– the document is loading.
– the document was fully read.
– the document was fully read and all resources (like images) are loaded too.

So we can check and setup a handler or execute the code immediately if it’s ready.

Like this:

There’s also event that triggers when the state changes, so we can print all these states like this:

The event is an alternative mechanics of tracking the document loading state, it appeared long ago. Nowadays, it is rarely used.

Let’s see the full events flow for the completeness.

Here’s a document with , and handlers that log events:

The working example is in the sandbox.

The typical output:

initial readyState:loading
readyState:interactive
DOMContentLoaded
iframe onload
img onload
readyState:complete
window onload

The numbers in square brackets denote the approximate time of when it happens. Events labeled with the same digit happen approximately at the same time (± a few ms).

becomes right before . These two things actually mean the same.
becomes when all resources ( and ) are loaded. Here we can see that it happens in about the same time as ( is the last resource) and . Switching to state means the same as . The difference is that always works after all other handlers.

Это отлично работает

Я должен проверить, есть ли доступный файл PDF для записи. перед открытием нового пустого окна, чтобы получить файл, а затем закрыть его, как в случае1

Как в инстаграме добавить адрес, и что делать, если их несколько

Сценарий для случая 2:

Теперь это не работает. На самом деле моя первая проблема заключалась в том, что он не делал новое окно, потому что оно рассматривает его как всплывающее окно, но я исправил это после часа исследований. Теперь закрытие окна — моя проблема.

Я уже искал это и все еще в настоящее время ищу не только здесь, но, к сожалению, я не смог найти ответ по этой проблеме. Любая помощь приветствуется.

Обновление . Для меня сработало использование XMLHttpRequest, чтобы мне не нужно было открывать новую пустую вкладку, чтобы мои php-заголовки служили мне файлом PDF.

Вот код, который я использую:

URL-адрес, который я использовал, был обработан контроллером, который дает мне pdf-файл с использованием заголовков php.

5 ответов

Лучший ответ

Если вы напрямую запускаете код с , вы откладываете рендеринг вашего браузера на время, необходимое для выполнения кода JavaScript.

Вы можете попробовать вставить свой код в вашего HTML-документа:

Вы увидите, что страница остается пустой, пока вы не отклоните предупреждение. Таким образом, каждая секунда, которую браузер выполняет для запуска вашего кода JavaScript, — это секунда, которую ваши пользователи должны ждать, пока сайт будет отображен.

Теперь, если вы измените код, который будет выполняться для тела , страница будет обработана до , появится предупреждение:

jehna1
11 Мар 2016 в 22:59

Ожидание события onload гарантирует, что все ваши скрипты и ресурсы загружены

Предположим, что вы используете jquery на своей странице, и вы вызвали функцию, которая использует его напрямую без загрузки, вы не можете гарантировать, что файл jquery был загружен, что приведет к ошибкам и, возможно, разрушит всю вашу логику

Hassan Khallouf
11 Мар 2016 в 22:54

сработает после завершения загрузки DOM. В вашем примере DOM не требуется. Однако следующий код не будет работать, если DOM еще не загружен:

Предполагая, что ваша страница содержит элемент с идентификатором , он сообщит свой текст.

rrowland
11 Мар 2016 в 22:53

Рассмотрим эти два блока кода:

В первом примере мы получим ошибку, потому что элемент, на который вы ссылаетесь, не найден при запуске скрипта — и поэтому вы пытаетесь получить из .

Во втором примере найдет элемент с идентификатором foo, потому что будет запущен только тогда, когда полная DOM будет загружена и, таким образом, элемент доступен.

baao
11 Мар 2016 в 22:56

Событие onload удобно, чтобы убедиться, что страница полностью загружена перед запуском скрипта. Для вашего примера выше это не имеет смысла, но если ваша страница все еще загружает элемент внизу, и вы пытаетесь вызвать его, то ничего не будет работать.

Я рекомендую использовать jQuery и использовать функцию ready. Таким образом, вы убедитесь, что ваша страница полностью загружена.

Если вы не хотите загружать запрос, просто поместите свой JavaScript внизу страницы. Это лучшая практика, обеспечивающая полную загрузку DOM.

Maximus
11 Мар 2016 в 22:58

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Window.onbeforeunload¶

If a user has initiated navigation away from the page or intends to close the window, the beforeunload will ask for additional confirmation. In case of discarding the event, the browser will ask the user whether they are sure. See how to do it by running the following code and reloading the page, as shown below:

An interesting thing to note: returning a non-empty string also counts as aborting the event. Previously, the browsers used to show it as a message, but the modern specification doesn’t allow that.

Let’s take a look at an example:

The reason for changing the behaviour was that some webmasters abused the event handler by showing annoying messages. Still, old browsers may show messages, but there is no way of customizing the message.

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3html.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() { alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies (using «advanced» javascript):

<body onload=»checkCookies()»><p id=»demo»></p><script>
function checkCookies() { var text = «»; if (navigator.cookieEnabled == true) { text = «Cookies are enabled.»; } else { text = «Cookies are not enabled.»; }

document.getElementById(«demo»).innerHTML = text;}</script>

readyState

Что произойдет, если установить обработчик DOMContentLoaded после загрузки документа? Естественно, он никогда не запустится.

Бывают случаи, когда непонятно, готов ли документ. Например, внешний скрипт с атрибутом async загружается и запускается асинхронно. В зависимости от сети он может загружаться и выполняться до завершения загрузки документа или после этого. Поэтому необходимо знать текущее состояние документа.

Свойство document.readyState предоставляет такую информацию. Возможны три значения:

«» — документ загружается;
«interactive» — документ полностью считан;
«complete» — документ полностью считан и все ресурсы (например, изображения) загружены.

Так можно проверить значение document.readyState и настроить обработчик или выполнить код немедленно, как только он будет готов.

Например, следующим образом:

function work() { /*...*/ }
if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', work);
} else {
  work();
}

Событие readystatechange запускается при изменении состояния. Можно выводить все эти состояния следующим образом:

// текущее состояние
console.log(document.readyState);

// выводим изменение состояния
document.addEventListener('readystatechange', () => console.log(document.readyState));

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

Как размещается readystatechange по отношению к другим событиям? Чтобы продемонстрировать порядок их срабатывания, ниже приводится пример с <iframe>, <img> и обработчиками, которые регистрируют события (JavaScript onload и другие):

<script>
  function log(text) { /* выводим время и сообщение */ }
  log('initial readyState:' + document.readyState);

  document.addEventListener('readystatechange', () => log('readyState:' + document.readyState));
  document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded'));

  window.onload = () => log('window onload');
</script>

<iframe src="iframe.html" onload="log('iframe onload')"></iframe>

<img src="http://en.js.cx/clipart/train.gif" id="img">
<script>
  img.onload = () => log('img onload');
</script>

Демо-версию можно найти на sandbox.

Стандартная последовательность событий:

инициализация readyState:loading;
readyState:interactive;
DOMContentLoaded;
iframe onload;
readyState:complete;
img onload;
window onload JavaScript.

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

Document.readyState принимает состояние interactive непосредственно перед DOMContentLoaded. Эти два события фактически означают одно и то же.

Document.readyState завершается, когда загружаются все ресурсы (iframe и img). Мы видим, что это происходит примерно в то же время, что и img.onload (img — последний ресурс) и window.onload. Переключение на состояние complete означает то же, что и window.onload. Разница в том, что window.onload всегда запускается после всех других обработчиков load.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sinh()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
Modifiers:
g
i
m
Groups:

(x|y)
Metacharacters:
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
Quantifiers:
+
*
?
{X}
{X,Y}
{X,}
$
^
?=
?!
Properties:
constructor
global
ignoreCase
lastIndex
multiline
source
Methods:
compile()
exec()
test()
toString()

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Автоматическое заполнение браузерами

Firefox, Chrome и Opera автоматически заполняют поля форм для DOMContentLoaded. Например, если страница имеет форму с полями для ввода имени пользователя и пароля, а браузер запомнил их значения, DOMContentLoaded может попытаться автоматически их заполнить (если это одобрено пользователем).

Поэтому, кроме задержки до полной загрузки и выполнения скриптов, DOMContentLoaded может задерживаться и из-за автоматического заполнения полей форм. Вы могли сталкиваться с этим на некоторых сайтах: поля ввода логина / пароля не обновляются автоматически, и возникает задержка до полной загрузки страницы. На самом деле это задержка события DOMContentLoaded.

Одно из незначительных преимуществ использования атрибутов async и defer для внешних скриптов заключается в том, что они не блокируют DOMContentLoaded и позволяют избежать задержки, связанной с автоматическим заполнением форм.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

window.onbeforeunload

If a visitor initiated navigation away from the page or tries to close the window, the handler asks for additional confirmation.

If we cancel the event, the browser may ask the visitor if they are sure.

You can try it by running this code and then reloading the page:

For historical reasons, returning a non-empty string also counts as canceling the event. Some time ago browsers used show it as a message, but as the says, they shouldn’t.

Here’s an example:

The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that – there’s no way to customize the message shown to the user.

ReadyState¶

The document.readyState property informs about the current loading state.

Three possible values can be distinguished:

"loading": the state of loading the document.
«interactive»"interactive": the document is completely read.
"complete": the document is completely read, and all the resources are loaded.

So, you can check document.readyState and set up a handler, executing the code immediately when it’s ready.

Here is an example of using document.readyState:

You can also use the readystatechange event, which gets activated when the state changes. So, all the state can be printed as follows:

Try it Yourself »

So, this event is an alternative way of tracking the document loading state. But, nowadays, it’s not used often.

The complete events flow will look like this:

Try it Yourself »

The example above includes <iframe>, <img>, as well as handlers for logging events.

Window.onunload¶

The unload event triggers on the window when a visitor leaves the page. You can do there something that doesn’t include a delay (for example, closing related popup window). Sending analytics is considered a notable exception.

Imagine, you want to gather data about how the page is used: scrolls, mouse clicks, and so on. As a rule, the unload event is when the user leaves the page, and you want to save the data on the server. A unique navigator.sendBeacon(url, data) method exists for such needs. It can send the data to the background. Also, there is no delay in the transition to another page still performing sendBeacon.

Here is an example of using sendBeacon:

So, in the example above:

The request is forwarded as POST.
It is possible to send not only a string but also forms and other formats.
There is a data limit: 64kb.

Once the sendBeacon request is over, the browser has probably left the document. Therefore, there is no way of getting server response (for analytics, it’s usually empty).

Also, you can use keepalive to perform “after-page-left” requests in the fetch method for generic network requests.

For canceling the transition to another page, you can use another event: onbeforeunload.

More Examples

Example

Using onload on an <img> element. Alert «Image is loaded» immediately after
an image has been loaded:

<img src=»w3html.gif» onload=»loadImage()» width=»100″ height=»132″><script>function loadImage() { alert(«Image is loaded»);}
</script>

Example

Using the onload event to deal with cookies (using «advanced» javascript):

window.onunload

When a visitor leaves the page, the event triggers on . We can do something there that doesn’t involve a delay, like closing related popup windows.

The notable exception is sending analytics.

Let’s say we gather data about how the page is used: mouse clicks, scrolls, viewed page areas, and so on.

Naturally, event is when the user leaves us, and we’d like to save the data on our server.

There exists a special method for such needs, described in the specification https://w3c.github.io/beacon/.

It sends the data in background. The transition to another page is not delayed: the browser leaves the page, but still performs .

Here’s how to use it:

The request is sent as POST.
We can send not only a string, but also forms and other formats, as described in the chapter Fetch: Basics, but usually it’s a stringified object.
The data is limited by 64kb.

When the request is finished, the browser probably has already left the document, so there’s no way to get server response (which is usually empty for analytics).

There’s also a flag for doing such “after-page-left” requests in fetch method for generic network requests. You can find more information in the chapter Fetch API.

If we want to cancel the transition to another page, we can’t do it here. But we can use another event – .

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Несколько слов об async и defer

Атрибуты async и defer в window onload JavaScript используются только для внешних скриптов. Они игнорируются, если нет подключения через src.

Оба атрибута указывают браузеру, что он может продолжать обрабатывать страницу и загружать скрипты «в фоновом режиме». А затем запускать скрипт после его полной загрузки. Таким образом, скрипт не блокирует создание DOM и отображение страниц.

Между этими атрибутами есть два отличия.

	async	Defer
Порядок	Скрипты с атрибутом async выполняются в том порядке, в котором они загружаются. Порядок, в котором они указаны в документе, не имеет значения — скрипт, загруженный первым, выполняется первым.	Скрипты с атрибутом defer всегда выполняются в соответствии с порядком, в котором они расположены в документе.
DOMContentLoaded	Скрипты с атрибутом async могут загружаться и выполняться, пока документ еще не загружен полностью. Это происходит, когда скрипты являются небольшими или кэшируются, а документ достаточно объемен.	Скрипты с атрибутом defer выполняются после того, как документ будет полностью загружен и обработан (если необходимо они ожидают завершения процесса), сразу после события DOMContentLoaded.

Атрибут async используется для полностью независимых скриптов.

6 ответов

Лучший ответ

просто запускается, когда браузер доходит до него.

ожидает загрузки окна, прежде чем запускать его.

В общем случае вы должны делать второе, но вы должны прикрепить к нему прослушиватель событий вместо определения функции. Например:

Crayon Violent
24 Фев 2019 в 18:45

Вот документация по MDN.

Согласно этому:

Ваш первый фрагмент кода будет запущен, как только браузер достигнет этого места в HTML.

Второй фрагмент вызовет всплывающее окно, когда DOM и все изображения будут полностью загружены (см. Спецификации).

Учитывая функцию , на самом деле не имеет значения, в какой момент она будет работать (она не зависит ни от чего, кроме объекта ). Но если вы хотите манипулировать DOM — вам определенно следует подождать, пока он правильно загрузится ,

Slava Fomin II
23 Фев 2017 в 13:32

Причина ожидания загрузки DOM заключается в том, что вы можете настроить таргетинг на любые элементы, которые загружаются после вашего скрипта. Если вы просто создаете , это не имеет значения. Допустим, однако, что вы нацелились на , который был в вашей разметке после вашего скрипта, вы получите ошибку, если не дождетесь загрузки этого фрагмента дерева DOM.

— отличная альтернатива , если вы используете jQuery.

Смотрите здесь: window.onload vs $ (document) .ready ()

Community
23 Май 2017 в 12:10

Все остальные ответы кажутся устаревшими

Во-первых, размещение сценариев сверху и использование — это анти-паттерн. Это в лучшем случае осталось от дней IE или неправильного понимания JavaScript и браузера в худшем случае.

Вы можете просто переместить ваши скрипты внизу вашего HTML

Единственная причина, по которой люди использовали , заключается в том, что они ошибочно полагали, что сценарии необходимо добавить в раздел . Поскольку все выполняется по порядку, если ваш сценарий был в разделе head, тогда тело и ваш контент еще не существовали по определению execute in order .

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

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

Преимущество этого заключается в том, что браузер немедленно начнет загружать сценарии и будет выполнять их в указанном порядке, но будет ожидать их выполнения до тех пор, пока страница не загрузится, не нужно или лучше, но все еще не нужно {{Х1}}

gman
15 Янв 2018 в 02:28

У вас есть три варианта:

Непосредственно внутри тега script выполняется его, как только он анализируется.
Inside запустит его, как только DOM будет готов.
Внутри запустится, как только будут загружены все ресурсы страницы.

Henrik
24 Ноя 2013 в 20:06

Это зависит от того, хотите ли вы, чтобы он запускался, когда встречается элемент script, или от того, хотите ли вы, чтобы он запускался, когда срабатывает событие load (то есть после загрузки всего документа (включая такие вещи, как изображения)).

Ни один не всегда прав.

В целом, однако, я бы не стал назначать функции непосредственно в пользу использования (с библиотеками совместимости, если мне нужно было поддерживать старые браузеры).

Quentin
24 Ноя 2013 в 20:02

9 ответов

Лучший ответ

Большинство предлагаемых «решений» являются специфичными для Microsoft или требуют раздутых библиотек. Вот один хороший способ. Это работает с W3C-совместимыми браузерами и с Microsoft IE.

user83421
27 Мар 2009 в 01:34

Mootools — еще одна замечательная среда JavaScript, которая довольно проста в использовании и, как сказал RedWolves с jQuery вы можете просто продолжать отбрасывать столько обработчиков, сколько захотите.

Для каждого файла * .js, который я включаю, я просто заключаю код в функцию.

И есть также преимущества использования domready вместо onload

cole
13 Авг 2008 в 04:16

На самом деле, согласно этой странице MSDN, похоже, что вы может вызывать эту функцию несколько раз, чтобы зарегистрировать несколько сценариев. Вам просто нужно использовать разные ключи (второй аргумент).

Я считаю, что должно работать.

Derek Park
13 Авг 2008 в 03:39

Рассматривали ли вы возможность использовать что-то вроде JQuery, которое обеспечивает основу для очистки добавления нескольких обработчиков событий?

Jeff Atwood
13 Авг 2008 в 03:30

Я не знаю много о ASP.NET, но почему бы не написать пользовательскую функцию для события onload, которая в свою очередь вызывает обе функции для вас? Если у вас есть две функции, вызовите их обе из третьего скрипта, который вы регистрируете для события.

Derek Park
13 Авг 2008 в 03:26

Попробуй это:

Редактировать: эй, я только собирался войти в Firefox и переформатировать это сам! Похоже, до сих пор не отформатировать код для меня с IE7.

Chris Farmer
13 Авг 2008 в 03:33

Вы можете сделать это с помощью jquery

Alexander Elgin
11 Фев 2016 в 03:24

У меня была похожая проблема сегодня, поэтому я решил ее с следующим образом:

И в дополнительных файлах js, которые я хочу прикрепить к событию onload, я просто должен сделать это:

Я обычно использую jQuery, но на этот раз я ограничился только js, которые какое-то время заставляли меня думать!

Alexander Elgin
11 Фев 2016 в 03:27

По-прежнему существует уродливое решение (которое намного хуже, чем использование каркаса или / ), которое заключается в сохранении текущего события :

Обратите внимание, что фреймворки, такие как jQuery, обеспечат способ выполнения кода, когда DOM готов, а не при загрузке страницы. Готовность DOM означает, что ваш HTML загружен, но не внешние компоненты, такие как изображения или таблицы стилей, что позволяет вам вызываться задолго до того, как сработает событие load

Готовность DOM означает, что ваш HTML загружен, но не внешние компоненты, такие как изображения или таблицы стилей, что позволяет вам вызываться задолго до того, как сработает событие load.

Alexander Elgin
11 Фев 2016 в 03:26

Summary

Page load events:

event triggers on when DOM is ready. We can apply JavaScript to elements at this stage.
- Script such as or block DOMContentLoaded, the browser waits for them to execute.
- Images and other resources may also still continue loading.
event on triggers when the page and all resources are loaded. We rarely use it, because there’s usually no need to wait for so long.
event on triggers when the user wants to leave the page. If we cancel the event, browser asks whether the user really wants to leave (e.g we have unsaved changes).
event on triggers when the user is finally leaving, in the handler we can only do simple things that do not involve delays or asking a user. Because of that limitation, it’s rarely used. We can send out a network request with .
is the current state of the document, changes can be tracked in the event:
- – the document is loading.
- – the document is parsed, happens at about the same time as , but before it.
- – the document and resources are loaded, happens at about the same time as , but before it.

Добавить несколько событий window.onload

HTML 5. Асинхронная загрузка JavaScript

3 ответа

readyState

Это отлично работает

5 ответов

HTML Tags

Window.onbeforeunload¶

More Examples

Example

Example

readyState

JavaScript

Автоматическое заполнение браузерами

HTML Reference

HTML Tags

window.onbeforeunload

ReadyState¶

Window.onunload¶

More Examples

Example

Example

Популярные

window.onunload

HTML Справочник

HTML Теги

HTML Теги

Несколько слов об async и defer

6 ответов

9 ответов

Summary