阻止jQuery mobile设置document.title？

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

看起来jQuery mobile将document.title设置为data-role =“header”的文本内容，例如：

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

$（'div [data-role =“page”]'）。bind（'pageshow'，function（）{document.title =“我的标题”}）;

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

是否有更好/更具语义的方法来做到这一点？

5 个解决方案

#1

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

另一种解决方案是将原始文档标题复制到每个页面的data-title属性：

$(":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.

这种方法优于在页面显示上更改标题的优点是它可以防止页面转换期间文档标题闪烁。

#2

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

如果你将值包装在div周围，它将不会更新标题。喜欢这个：

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

#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.

我只是修补jQuery mobile来删除不需要的行为。它似乎在jquery.mobile.navigation.js中。您可以重建jQuery Mobile以再次获得缩小版本。

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).

如果你有野心，你甚至可以向jQuery Mobile提交一个错误，要求这是一个选项（如果你愿意的话，甚至可以自己编写一个补丁）。

#4

The jqmData option here didn't work for me. The H1 wrapping option messed up the looks which I would need to correct through CSS. What did work for me and is actually documented by jQuery Mobile is:

这里的jqmData选项对我不起作用。 H1包装选项搞砸了我需要通过CSS纠正的外观。对我有用并且实际上由jQuery Mobile记录的是：

http://demos.jquerymobile.com/1.1.2/docs/pages/page-titles.html

Which comes down to adding the data-title attribute to the div with data-role="page":

这归结为使用data-role =“page”将data-title属性添加到div：

<div data-role="page" data-theme="a" data-title="MyPage - @ViewBag.Title">

In this particular example I'm setting the page title to "MyPage - " followed by the page title as set through MVC in the ViewBag.

在这个特定的例子中，我将页面标题设置为“MyPage - ”，然后是通过ViewBag中的MVC设置的页面标题。

#5

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

$（“：jqmData（role ='page'）”）。attr（“data-title”，document.title）;

This works as proposed by @stanislaw-osinski - however, I had to use it like this to get it work in jQuery Mobile v1.4.5:

这是由@ stanislaw-osinski提出的 - 但是，我必须像这样使用它来使它在jQuery Mobile v1.4.5中运行：

<script>
$(document).bind("pageinit", function(){
     // Patch to prevent overwriting <title></title>
    $(":jqmData(role='page')").attr("data-title", document.title);
});
</script>

#1