Opening a popup/new browser window will prevent ongoing GET request from finishing on the original/calling page

RESOLVED WORKSFORME

Status

()

Firefox
General
RESOLVED WORKSFORME
7 years ago
3 years ago

People

(Reporter: Ville Myrskyneva, Unassigned)

Tracking

3.6 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
User-Agent:       Opera/9.80 (X11; Linux x86_64; U; en) Presto/2.6.30 Version/10.63
Build Identifier: Mozilla/5.0 (X11; U; Linux i686 (x86_64); en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

When starting a new GET request on a web page, right before opening a popup from javascript (window.open(url)), the GET request never finishes.

E.g. If rendering dynamically (with javascript) an image to a web page it causes the browser to send a GET request to a Java servlet (for example). Opening a popup/new window/browser tab right after the image-object starts loading content, the focus is removed from the original page to the new popup, which some how prevents the browser from receiving the response to the GET request.
Testing on the server side and with other browsers, the servlet receives the request, servlet returns valid headers + image data and as a result the image is also rendered as supposed. (The request is received by the servlet with firefox also)


Tested/confirmed with firebug and with the latest available build (4.0b12pre 2011-02-16)

Reproducible: Always

Steps to Reproduce:
Reproduction steps #1

1. Create a javascript that adds a new image to a page and opens a popup
2. Immediately after the new image receives it's url (img.src=imgUrl => GET request is generated) for loading the image content, open a popup (window.open(url))
3. Get back to the original page => no image rendered. If the network activity is followed with firebug (from the 'net' tab), it's visible that the GET request never finishes
4. OPTIONAL TEST: Add an alert right after the img.src and before the window.open(url). The page gets a bit more time for the GET request to finish and the image gets rendered

Reproduction steps #2
1. Create a javascript that opens a popup and adds a new image to a page
2. Open a popup (window.open(url)), also make the same script continue with creating a new image on to the page. When the image gets its url (img.src=imgUrl => GET request is generated) and it starts loading content from the given source
3. Get back to the original page => no image rendered. If the network activity is followed with firebug, there is _no_ GET request displayed. However a request is received on the server side
Actual Results:  
The GET request does not finish

Expected Results:  
The GET request should finish/be handled to end as it's been provide with the requested data

Since you do not have an option to upload files, I will insert a test html page here for reproducing all the mentioned steps. (Hope you can get working html out from this)

// --------------------

<html>
<head>
<script type="text/javascript">
var imageSrc = "http://code.google.com/p/fbug/logo?cct=1297315187";
function preventCache() {
    var millis = new Date().getTime();
    var preventCache = "?param="+millis;
    return preventCache;
}
function createGETRequestAndOpenPopup() {
    var img = new Image();
	// Triggers a GET request
	img.src = imageSrc + preventCache();
	window.open("http://www.google.com");
	draw(img);
}
function openPopupAndCreateGETRequest() {
    window.open("http://www.google.com");
    var img = new Image();
	// Triggers a GET request
	img.src = imageSrc + preventCache();
	draw(img);
}
function createGETWithAlertAndOpenPopup() {
    var img = new Image();
	// Triggers a GET request
	img.src = imageSrc + preventCache();
	alert("stay here for a sec");
	window.open("http://www.google.com");
	draw(img);
}
function draw(img) {
    var canvas=document.getElementById("canvas");
    if ( !canvas.getContext ) {
        return;
    }
    var ctx=canvas.getContext("2d");
	ctx.drawImage(img, 0, 0);
}
</script>
<title>Test FireBug Net / Overlapping GET and popup request</title>
</head>
	<body>
	    <p style=""color: red;">Open the firebug &gt; net tab. Follow the GET request(s) generated by the image tag created in javascript</p><br/>
	    <p>GET request and popup (No response for the GET recorded) <span style="text-decoration: underline; color: blue; cursor: pointer;" onclick="createGETRequestAndOpenPopup();">click here</span> (=&gt; No image gets loaded on FF 3.6.13)</p>
	    <p>Popup and GET request (No GET request visible in the net tab) <span style="text-decoration: underline; color: blue; cursor: pointer;" onclick="openPopupAndCreateGETRequest();">click here</span> (=&gt; No image gets loaded on FF 3.6.13)</p>
	    <p>GET request, alert and popup (GET gets response: 200 OK, since the focus stays on the page until it is received!?) <span style="text-decoration: underline; color: blue; cursor: pointer;" onclick="createGETWithAlertAndOpenPopup();">click here</span> (=&gt; Image gets loaded)</p>
	    <br/><p><a href="fireBugNetTest.html">Reload page (remove image)</a></p>
	    <canvas id="canvas" width='100' height='100'>Browser does not support Graphics Canvas</canvas>
	    
	    <br/><p>This test can be further studied by creating e.g. a Java servlet to respond for the GET request.</p>
	    <p>You will notice that the servlet does receive a request, regardless where the 'img.src' is positioned in the javascripts.</p>
	</body>
</html>
(Reporter)

Updated

7 years ago
Version: unspecified → 3.6 Branch
The reason why the image isn't displayed for the first two requests is that they are not loaded yet when draw() is called.
I.e. the script must listen for the "onload" event handler of the "img" object. So changing the code to this it works fine:

function createGETRequestAndOpenPopup() {
    var img = new Image();
    img.onload = function() { draw(this) };
    // Triggers a GET request
    img.src = imageSrc + preventCache();
    window.open("http://www.google.com");
}
function openPopupAndCreateGETRequest() {
    window.open("http://www.google.com");
    var img = new Image();
    img.onload = function() { draw(this) };
    // Triggers a GET request
    img.src = imageSrc + preventCache();
}

That means this is working as expected and there is no bug.

Sebastian
(Reporter)

Comment 2

5 years ago
This is already an old issue, but recalling on how it worked with all the other browsers, it felt a bug at a time. It requires a special handling just for FF.
> It requires a special handling just for FF.
That may have been true before. Though I tested your test case with Chrome 26.0.1410.64 and Opera 12.15 and there the image was also not displayed for the first two requests while it was working fine with the changes of comment 1.

So this issue can finally be closed.

Sebastian
As of comment 3 and having the right to close issues now, I finally close this one.

Sebastian
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.