Scripts on previous page don't work while stylesheets on new page load

NEW
Unassigned

Status

()

8 years ago
8 years ago

People

(Reporter: jason.barnabe, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

266 bytes, text/html
Details
100 bytes, application/octet-stream
Details
71 bytes, application/octet-stream
Details
(Reporter)

Description

8 years ago
I have an onsubmit handler on a form to prevent multiple form submissions. After the first click, the handler returns false, preventing the form from being submitted. I noticed that while it prevents additional submits immediately after the user clicks the button, it does not prevent additional submits immediately before the new page is shown.

I did some investigation and I found that the JS from the old page no longer works when the HTML of the new page had finished loading, but its stylesheets were still being loaded.

I set up a test case for this at http://userstyles.org/first.html. The first button simply appends text to the page (to show that JS works). The "Search Google" button sends you to Google (to show that other UI works). The link is to a page that takes 5 seconds to load, and references a stylesheet that takes an additional 5 seconds to load.

If you click the link, then start regularly clicking the "Add text" button, you can see that the JS works for the first 5 seconds, stops working for 5 seconds, then the new page loads. The Google button will always work.

I did some testing on various browsers, and this is what I found:


Firefox 3.6, 4.0b8:

Page begins loading.
	-Old page still displayed. JS, forms, and links work.
Page loaded, stylesheet loading.
	-Old page still displayed. Forms and links work. JS does not.
Stylesheet loads.
	-New page displayed with stylesheet applied.


Chrome 9:

Page begins loading.
	-Old page still displayed. JS, forms, and links work.
Page loaded, stylesheet loading.
	-New page displayed (blank page).
Stylesheet loads.
	-New page displayed with stylesheet applied.

	
IE 8, 9:

Page begins loading.
	-Old page still displayed. JS, forms, and links work.
Page loaded, stylesheet loading.
	-Old page still displayed. Clicking on items does nothing.
Stylesheet loads.
	-New page displayed with stylesheet applied.
	

Opera 11:

Page begins loading.
	-Old page still displayed. JS, forms, and links work.
Page loaded, stylesheet loading.
	-New page displayed without stylesheet.
Stylesheet loads.
	-Stylesheet applied to new page.


So essentially Firefox is the only browser where the page can be in a state where its buttons and links work, but its JS does not.
(Reporter)

Comment 1

8 years ago
Created attachment 501818 [details]
first.html
(Reporter)

Comment 2

8 years ago
Created attachment 501819 [details]
slow.php
(Reporter)

Comment 3

8 years ago
Created attachment 501821 [details]
slowstylesheet.php
(Reporter)

Comment 4

8 years ago
I attached the files used in the testcase. They only work from a server that supports PHP, so don't work from Bugzilla. See http://userstyles.org/first.html for a working example.
Yeah, we should probably implement what IE does here.

Comment 6

8 years ago
Yeah, I agree. We should probably just disable default handling (PostHandleEvent calls) if
current target isn't in the current inner window.
But how to do that so that it doesn't affect badly to event dispatch performance...
That seems like it would be a pretty quick check, no?  Or at least could be made so (hang it off the document or whatnot, say).
You need to log in before you can comment on or make changes to this bug.