Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

DOM load event Doc

15 views
Skip to first unread message

Adi Prasetyo

unread,
May 12, 2016, 1:41:15 PM5/12/16
to List-dev-mdc
i try to rewrite the example on
https://developer.mozilla.org/en-US/docs/Web/Events/unload.
But it's looks like the beforeunload event not executed on FF, therefore
both unload and beforeunload event looks not executed on Chrome.

Sadly i found this question on SO
http://stackoverflow.com/questions/1594548/dom-window-unload-event-is-it-reliable
.

Since i use the documentation on devdocs.io offline feature, i notice i
miss the browser compatibility section. And i really curious why i am not
see note that it's experimental feature?

Regarding my problem and the documentation, i need suggestion or direction.

Sebastian Zartner

unread,
May 13, 2016, 4:45:27 AM5/13/16
to Adi Prasetyo, List-dev-mdc
The events *are* executed, though they are special treated due to their
abusive nature.

Simple test case (ensure you have persistent logs enabled):
<script>
function log(e) {
console.log(e.type);
}
window.addEventListener("load", log);
window.addEventListener("beforeunload", log);
window.addEventListener("unload", log)
</script>

Though you'll realize a difference in behavior regarding the "unload"
event. While Firefox triggers it everytime you leave the page, Chrome does
not trigger it when you visit another domain.

Sebastian
> _______________________________________________
> dev-mdc mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-mdc
> MDN contributor guide: http://bit.ly/ContributorGuide
> Doc project Trello board: https://trello.com/b/HAhl54zz/status
>

Adi Prasetyo

unread,
May 13, 2016, 12:22:05 PM5/13/16
to Sebastian Zartner, List-dev-mdc
Sorry sir, my bad forget add the function parameter.
I am not sure about the persistence logs, and how it affect the behavior.
I already make the sequence, and test it both chrome and FF like so :

​i see same sequence on FF and chrome, CMIIW.
is it necessary to add on the documentation?



On 13 May 2016 at 15:38, Sebastian Zartner <sebastia...@gmail.com>
wrote:

Sebastian Zartner

unread,
May 17, 2016, 7:57:53 AM5/17/16
to mozilla...@lists.mozilla.org
Sorry that it took a bit! I needed time to come up with a proper test case.

The steps you show are correct for a normal page load process. Example code attached:

main.html:
<script src="log.js"></script>
<iframe src="iframe1.html"></iframe>

iframe1.html:
<script src="log.js"></script>
<a href="iframe2.html">iframe2</a>

iframe2.html:
<script src="log.js"></script>

log.js:
function log(evt) {
console.log(evt.target.URL + ": " + evt.type);
}

function processReadyStateChange(evt) {
console.log(evt.target.URL + " readyState: " + document.readyState);
}

window.addEventListener("load", log);
window.addEventListener("pagehide", log);
window.addEventListener("beforeunload", log);
window.addEventListener("unload", log);
window.addEventListener("pageshow", log);
document.addEventListener("readystatechange", processReadyStateChange);


The difference is when you access another page. In my test case I 1) cleared the console log 2) reloaded the page 3) clicked the link within the iframe 4) navigated to https://mozilla.org.

Result in Firefox:

main.html: beforeunload main.html: beforeunload
iframe1.html: beforeunload iframe1.html: beforeunload
main.html: pagehide main.html: pagehide
main.html: unload main.html: unload
iframe1.html: pagehide iframe1.html: pagehide
iframe1.html: unload iframe1.html: unload
main.html readyState: interactive main.html readyState: interactive
iframe1.html readyState: interactive iframe1.html readyState: interactive
iframe1.html readyState: complete iframe1.html readyState: complete
iframe1.html: load iframe1.html: load
iframe1.html: pageshow iframe1.html: pageshow
main.html readyState: complete main.html readyState: complete
main.html: load main.html: load
main.html: pageshow main.html: pageshow
iframe1.html: beforeunload iframe1.html: beforeunload
iframe1.html: pagehide iframe1.html: pagehide
iframe1.html: unload iframe1.html: unload
iframe2.html readyState: interactive iframe2.html readyState: interactive
iframe2.html readyState: complete iframe2.html readyState: complete
iframe2.html: load iframe2.html: load
iframe2.html: pageshow iframe2.html: pageshow
main.html: beforeunload main.html: beforeunload
iframe2.html: beforeunload iframe2.html: beforeunload
main.html: pagehide
main.html: unload
iframe2.html: pagehide
iframe2.html: unload

That means Chrome does not send the 'unload' and 'pagehide' event when navigating to another domain.

So, I suggest to add a browser compatibility section explaining the differences in a footnote.

Sebastian

On Friday, May 13, 2016 at 6:22:05 PM UTC+2, Adi Prasetyo wrote:
> Sorry sir, my bad forget add the function parameter.
> I am not sure about the persistence logs, and how it affect the behavior.
> I already make the sequence, and test it both chrome and FF like so :
>
> ​i see same sequence on FF and chrome, CMIIW.
> is it necessary to add on the documentation?
>
>
>
> On 13 May 2016 at 15:38, Sebastian Zartner

Sebastian Zartner

unread,
May 23, 2016, 12:58:44 AM5/23/16
to Adi Prasetyo, mozilla...@lists.mozilla.org
Your diagram could be placed in a global article describing (page loading)
events. Maybe the others here on the list have an idea where exactly that
could be.

The behavior differences of the 'unload' and 'pagehide' events should be
described in their related articles.

Sebastian

On 21 May 2016 at 10:27, Adi Prasetyo <goend...@gmail.com> wrote:

> I just aiming to improve the documentation.
> Honestly now start confusing where it have to be placed.
> Where i can find to add compatibility section sir?
>
>
> On 17 May 2016 at 18:57, Sebastian Zartner <sebastia...@gmail.com>
> wrote:
>
>> Sorry that it took a bit! I needed time to come up with a proper test
>> case.
>>
>> The steps you show are correct for a normal page load process. Example
>> code attached:
>>
>> main.html:
>> <script src="log.js"></script>
>> <iframe src="iframe1.html"></iframe>
>>
>> iframe1.html:
>> <script src="log.js"></script>
>> <a href="iframe2.html">iframe2</a>
>>
>> iframe2.html:
>> <script src="log.js"></script>
>>
>> log.js:
>> function log(evt) {
>> console.log(evt.target.URL + ": " + evt.type);
>> }
>>
>> function processReadyStateChange(evt) {
>> console.log(evt.target.URL + " readyState: " + document.readyState);
>> }
>>
>> window.addEventListener("load", log);
>> window.addEventListener("pagehide", log);
>> window.addEventListener("beforeunload", log);
>> > Sorry sir, my bad forget add the function parameter.
>> > I am not sure about the persistence logs, and how it affect the
>> behavior.
>> > I already make the sequence, and test it both chrome and FF like so :
>> >
>> > ​i see same sequence on FF and chrome, CMIIW.
>> > is it necessary to add on the documentation?
>> >
>> >
>> >
>> > On 13 May 2016 at 15:38, Sebastian Zartner
0 new messages