Preventing jQuery mobile from setting document.title?

Question

It looks like jQuery mobile sets document.title to the text content of data-role="header", example:

<div data-position="fixed" data-role="header">
    <h1>This text</h1>
</div>

I have a hack workaround to prevent this as such:

$('div[data-role="page"]').bind('pageshow',function(){document.title = "My title"});

Is there a better/more semantic way to do this?

Answer 1

Another solution would be to copy the original document title to the data-title attribute of each page:

$(":jqmData(role='page')").attr("data-title", document.title);

The advantage of this approach over changing the title on pageshow is that it will prevent document title flicker during page transitions.

Answer 2

If you wrap your value around div it will not update the title. Like this:

<div data-position="fixed" data-role="header">
    <div><h1>This text</h1></div>
</div>

Answer 3

I would just patch jQuery mobile to remove the unwanted behaviour. It appears to be in jquery.mobile.navigation.js. You could rebuild jQuery Mobile to get the minified version again.

If you were feeling ambitious, you could even submit a bug to jQuery Mobile asking that this be an option (and possibly even write a patch yourself, if you're comfortable doing so).