IE title changes to <afterHash> if the page has a url with '#' , and has flash/swf embedded in it

Neeraj picture Neeraj · Dec 30, 2010 · Viewed 8.4k times · Source

The issue is, if IE (6.0+) , has flash content embedded in it, and the url of the page has a # somewhere in it, then when the flash content loads ,or if the user interacts with it, then the title of the window, changes to the content that is places after hash.

e.g http://adobeflashwebsite.com/index.html#somediv

Then the title of the page changes to 'somediv' , the moment a user will click on flash content, or many a times even the moment the flash content loads.

This happens only in IE.

This below is a very specific case I was facing:

The following is the environment I am facing issues with:

  1. Shinding engine to show an iGoogle like page
  2. Sammy.js
  3. Gadgets rendering flash/swf

The issue here is, no matter which plugin I try to embed flash with, I end up having the following problem

  1. When the flash loads completely, it appends something like #tab/xx , which actually is a string used by sammy to store the last navigational history within the page
  2. When, a user starts interacting with the flash, then the title is completely removed and only #tab/xx remains as the title.
  3. When a gadget is refreshed, even then there is issue like #2.

Could someone suggest, what the issue could be? Most probably is it related to sammy.js, as iGoogle doesn't have that issue.

Answer

Neeraj picture Neeraj · Feb 21, 2011

The following workaround is the only way (till now) , that I got nearest to solving the issue:

var isIE11OrGreater = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
if (!isIE11OrGreater) {
    var originalTitle = document.title.split("#")[0];    
    document.attachEvent('onpropertychange', function (evt) {
       if(evt.propertyName === 'title' && document.title !== originalTitle) {
        setTimeout(function () {
           document.title = originalTitle;
        }, 1);
    }
});

}

//Incase the developer wants to change the title manually, instead of directly using     //document.title=newtitle, he will need to use changeTitle(newTitle)
    function changeTitle(newTitle)
    {
        originalTitle = newTitle;
        document.title = newtitle;
    }