Skip to content
August 16, 2010 / edeustace

Internet Explorer crazy reloading because of Flex History javascript (part two)

A while ago I wrote about Internet Explorer going crazy when a hash is appended to a flex app that has history management enabled.
The solution to this was to use swfobject instead of the old flex embed script.

The last week we saw a very similar issue again with browser navigation. Clicking on certain links within our app would cause ie to reload itself many times a second. The status bar would read: “waiting for history/historyFrame.html…”.

I’m not sure if this has happened for other flex apps (our app uses alot of iframing – which could be having a detrimental effect).

The reason it happens is because in the flex history/history.js, there is a polling function (checkForUrlChange) that checks the browser url every 50 milliseconds. If a change in the url is detected, it writes this change to the iframed history/historyFrame.html (IE history mechanisms all have to user an iframe for this). This iframe then calls back to the parent javascript telling it to add a history entry. The problem however is that this process takes longer than 50 milliseconds, so the polling function gets triggered again, before the iframe has had a chance to notify the parent javascript.

To fix it I put in a flag to indicate that the iframe is loading. In the polling function if we detect that the iframe is loading, we exit the function. In the iframe onload event we trigger a function that updates this flag in the parent, at which point all the updates will have taken place and the poll will be back to normal.

To be honest I’m not crazy about the history.js code and would like to refactor it so its easier to read. In the meantime here is the fix that I applied.

Below are some snippets of the changes. The full code is here. Just replace the existing files in your flex history folder with these.

Also here’s a great blog post about the implementation of the Yahoo History Manager.

//history.js line 317 - 349
var iframeIsLoading = false;
    /* Called periodically to poll to see if we need to detect navigation that has occurred */
    function checkForUrlChange() {

        if (browser.ie) {

        	if( iframeIsLoading )
        	{
        		//log("[checkForUrlChange] iframe is loading - ignore" );
        		return;
        	}

            if (currentHref != document.location.href && currentHref + '#' != document.location.href) {
            	//log("[checkForUrlChange] currentHref != document.location.href" );
                //This occurs when the user has navigated to a specific URL
                //within the app, and didn't use browser back/forward
                //IE seems to have a bug where it stops updating the URL it
                //shows the end-user at this point, but programatically it
                //appears to be correct.  Do a full app reload to get around
                //this issue.
                if (browser.version < 7) {
                	setCurrentHref( document.location.href, "from [checkForUrlChange]" );
                    //currentHref = document.location.href;
                    document.location.reload();
                } else {
					if (getHash() != getIframeHash()) {
						// this.iframe.src = this.blankURL + hash;
						var sourceToSet = historyFrameSourcePrefix + getHash();
						iframeIsLoading = true;
						getHistoryFrame().src = sourceToSet;
					}
	
//history.js / line 617 - 621
//need function here so that its exposed to the historyFrame.html
 iframeHasLoaded : function()
        {
        	iframeIsLoading = false;
        },

 

           //history.js / line 642 - 648
           if ( currentHref != newUrl && currentHref + '#' != newUrl) {
        	   setCurrentHref(newUrl, "from [setBrowserURL]");
               addHistoryEntry(baseUrl, newUrl, flexAppUrl);
               currentHistoryLength = history.length;
           }

 

<body onload="notifyParent()">
<script>
        //historyFrame.html
	function notifyParent()
	{
		parent.BrowserHistory.iframeHasLoaded();
	}
        //...
</script>
</body>
Advertisements

6 Comments

Leave a Comment
  1. NItin / May 18 2011 7:45 am

    I am facing a problem that history is not stored for IE6/IE7 on windows XP, it works fine on all other browsers.

    I replaced both the files provided by you but it didn’t solved the problem. Can you please help.

    I tried to debug the code and found that on IE6/7 the history object do not store any values in the history object. 😦

  2. Federico / Sep 19 2013 3:32 pm

    Link for download doesn’t work

  3. edeustace / Sep 19 2013 7:09 pm

    Hi Federico – sorry that server is gone, I’m going to have to see if I have it on a hard drive somewhere and if I find it I’ll put it in github and update the post. Ed

  4. Federico / Sep 24 2013 8:28 am

    Any news Ed ?

  5. Federico / Sep 24 2013 8:51 am

    Really we don’t use deep linking in our flex application but I have a problem with IE9 and the logout button. On logout click I remove cookie and try to navigate to login page (.fcc) with

    navigateToURL(new URLRequest(‘http://myloginpage’), ‘_self’)}”

    but I have a crazy reload of my app

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: