document.readyState == "complete" is always false. The state is always "interactive"

Question

I am wiring a startup script JavaScript function on Page_Load to fire like so:

ScriptManager.RegisterStartupScript(Me, GetType(Page), "page_init", "page_init();", True)

This function calls a couple of different functions to setup the page. One of those functions checks the document.readyState and makes sure it's "complete". This deals with images and I want to make sure everything has been fully rendered.

if (document.readyState == "complete") {

Everything works fine, until I need to write a byte array to the outputstream (using either Response.BinaryWrite or Response.OutputStream.Write() to give a file to a user. After that, the document.readyState is always "interactive", until I navigate off of the page and back. I have even used a setTimeout(myFunction, 1000); call if document.readyState isn't complete to recursively call the function until it is complete. It never reaches "complete".

I have researched this myself for quite sometime, and cannot figure out this behavior. Any ideas as to how this is happening?

Answer 1

In order for the ReadyState to flip over to Complete, the server side has to terminate the connection.

If you look at your code you probably aren't calling Response.End AFTER the BinaryWrite or WriteToStream method. This is required in order to flush the response and alert the client that everything has been transferred.

Note that you can still process data server side after making the Response.End call, you just can't send any more data to the client.

A good example of how to do this properly is page 171 of Mastering ASP.Net with C# by A. Russell Jones (google preview here).

The nut of it is that you should create your stream, read it into the Byte Array, close the stream, then do a BinaryWrite, and finally call Response.End.

Answer 2

I just found out the issue is with an IFrame, which I apologize was a detail left out of the question.

More information can be found here:

IE (surprisingly gets my vote of approval here) There is an onreadystatechange event that fires whenever the iFrame's readyState property changes. That readyState reflects where the download is in the process.

Inline: When you initially set the src value of the iFrame element, the readyState changes to loading. When the file has completely downloaded, the readyState changes to interactive. The big difference between IE and the other browsers is that IE then changes the readyState property to complete when the page (or application) is fully loaded and ready for the user.

Attachment: This behaves identically to the Inline case of IE, but the readyState property never changes to complete. That wouldn't make much sense, since the user has to manually open the file by double-clicking on it or opening it from some application.