IE title changes to if the page has a

Question

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 1

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;
    }

Answer 2

It is IE bug:

• http://bugs.adobe.com/jira/browse/FP-240 (includes couple of workarounds)
• http://www.mail-archive.com/[e-mail]/msg14509.html
• http://code.google.com/p/swfobject/issues/detail?id=293

If you are using sammy's title method you could delay the execution a bit to make it behave on IE.

setTimeout(function() {
    context.title('Some title');
}, 1000);

This won't solve it really, but I have noticed that a little delay helps IE sometimes.

Answer 3

I'm not really familiar with sammy.js but:

1) the Flash object is somehow 'taking ownership' of the title property.

OR

2) sammy.js is clearing the title value on HTML losing focus aka Flash gaining it (less likley and don't know why would someone do that)

If 1) -> define the title property in the Flash object itself (not a Flash user, dunno if it can be done easily)

If 2) -> the javascript is dumping a variable string value connected to the title property?

SUGGESTION:

Enclose your flash object in a new <div> element, assigning the <div> a .click() event handler that changes the title property of a document. Try this:

$('title').text('YourTitleHere');

Answer 4

//some changes
if (browser.ie < 10) {
    document.attachEvent('onpropertychange', function(evt) {
        if (evt.propertyName === 'title' && document.title) {
            setTimeout(function() {
                var b=document.title.indexOf('#');
                if(b!==-1){
                    document.title = document.title.slice(0,b);
                }

            }, 1);
        }
    });
}

Answer 5

I'm a little late to the party but I prefer this approach:

var originalTitle = document.title;

copyLinkClipboard = new ZeroClipboard(document.getElementById('copy-link-btn'));

copyLinkClipboard.on( 'ready', function () {
  copyLinkClipboard.on( 'aftercopy', function (event) {
    event.target.blur();
    console.log('Successfully copied link to your clipboard!');
    document.title = originalTitle; // sets the title back on successful copy
  });
});

document.title = originalTitle; // sets title back when it changes on instantiation

This specifically changes the title back in the two events that ZeroClipboard changes it, rather than registering a listener on the document.onpropertychange event.