Html: pushState title is ignored in all implementations?

Created on 14 Dec 2016  Â·  18Comments  Â·  Source: whatwg/html

<title>title</title>
<button onclick="history.pushState({}, 'new title', 'other.html')">click me</button>

I tested this in Chrome, Edge, Firefox and Safari (Desktop) and none update the tab title.

https://html.spec.whatwg.org/#dom-history-replacestate says "The title is purely advisory. User agents might use the title in the user interface" but if it never does anything, some action is needed.

Is this a feature worth trying to save? If so we need to file bugs and see if we can make it happen. If not, then we should probably make this argument explicitly a dummy and recommend using document.title instead.

See also http://stackoverflow.com/questions/13955520/page-title-is-not-changed-by-history-pushstate

interop history

Most helpful comment

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4768

In Safari TP it is shown in the back/forward dropdowns.

All 18 comments

Do we know why it's not implemented?

I remember this being mentioned in a @Hixie interview from several years ago: http://html5doctor.com/interview-with-ian-hickson-html-editor/

Nice interview. After reading it, it looks like they decided that the second argument shouldn't be there, but they couldn't remove it because people had already started using it.

Would it be possible to give it a purpose now? I could see it being used to set the title of the page, but who knows what might show up if that were implemented, given people have been putting whatever in there for so long.

Ah, I remember that interview too, but not that this was the API in question. It does seem pretty unlikely that using its value in the UI should give the desired results after many years of being ignored. Should we make it explicitly a dummy argument by renaming it, then?

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4768

In Safari TP it is shown in the back/forward dropdowns.

I haven't worked on browsers for three-some years, but when I left Mozilla,
that was the state, yes. I just checked the implementation, and it seems
that we still completely ignore the title.

https://github.com/mozilla/gecko-dev/blob/master/dom/base/nsHistory.cpp#L269
https://github.com/mozilla/gecko-dev/blob/master/docshell/base/nsDocShell.cpp#L11807

Cheers,
-Justin

On Mon, Jan 2, 2017 at 4:26 AM, Simon Pieters notifications@github.com
wrote:

https://lists.w3.org/Archives/Public/public-whatwg-archive/
2010Jul/0330.html

https://bugs.webkit.org/show_bug.cgi?id=43730
https://bugzilla.mozilla.org/show_bug.cgi?id=585653

cc @jlebar https://github.com/jlebar @cdumez https://github.com/cdumez

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/whatwg/html/issues/2174#issuecomment-269966154, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAJMh9TFN5dt6pbVn_FzSPcX5fTuHv-Gks5rOOzzgaJpZM4LMw6t
.

@cdumez can you comment on Safari's behavior here? Was there a good reason for this behavior such that it would be a good idea for other browsers to adopt it, or should Safari align with Chromium and Gecko and ignore the argument?

@domenic what does Edge do?

Edge does not appear to use the title.

@cdumez Could you weigh in? I had an impression every browser ignored the title, the WebKit bug was even wontfixed back in the days. It'd be good to restore cross-browser compatibility one way or the other.

@weinig @beidson are probably better people to answer this question. This seems like fairly old behavior.

Pinging @cdumez to see if we can get this moving again.

What is being asked - For WebKit to stop using the title in back/forward list entries because other browsers don’t?

Since it’s advisory, what’s wrong with that status quo?

We were never going to allow JavaScript to dynamically script the title displayed in the current browser tab in such an obvious way...
But since these are “state” APIs and one intended use case was that pages push/replace state URLs in a bflist that could actually be restored at a later date, we didn’t see the harm in also scripting a useful title in those entries as the user might actually confront them later.

Yeah, I'm unsure exactly what the right approach is here. It seems like a conflict between a general desire for interop, and the harmlessness of letting browsers innovate on invisible-to-JS UI surfaces.

I lean toward it being better to converge on title being ignored, though. I'm imagining a couple of hypothetical web developers:

  • One who tests their site first in Chrome/Edge/Firefox, sees that the title argument does nothing (or reads that from some tutorial site that is itself unaware of the Safari behavior), and writes history.pushState(stateObj, "this is useless", "bar.html"). Soon they start getting bug reports from Safari users about confusing history drop-downs.
  • One who tests their site first in Safari, and assumes the title argument is useful in all browsers.

The first scenario is more troubling to me.

(Disclaimer: Although I implemented this feature in Firefox, it's been
almost five years since I've worked on web browsers. Maybe none of this is
correct.)

The way we expected people to do this was to modify the document's
. Firefox should remember the title at the time of the pushState<br /> call, and it should put that into the history dropdown.</p> <p>In this way it's consistent with how the history dropdown works for normal<br /> navigations.</p> <p>On Mon, Jul 9, 2018 at 8:35 AM Domenic Denicola <a rel="nofollow noopener" target="_blank" href="mailto:notifications@github.com">notifications@github.com</a><br /> wrote:</p> <blockquote> <p>Yeah, I'm unsure exactly what the right approach is here. It seems like a<br /> conflict between a general desire for interop, and the harmlessness of<br /> letting browsers innovate on invisible-to-JS UI surfaces.</p> <p>I lean toward it being better to converge on title being ignored, though.<br /> I'm imagining a couple of hypothetical web developers:</p> <ul> <li>One who tests their site first in Chrome/Edge/Firefox, sees that the<br /> title argument does nothing (or reads that from some tutorial site<br /> that is itself unaware of the Safari behavior), and writes history.pushState(stateObj,<br /> "this is useless", "bar.html"). Soon they start getting bug reports<br /> from Safari users about confusing history drop-downs.</li> <li>One who tests their site first in Safari, and assumes the title<br /> argument is useful in all browsers.</li> </ul> <p>The first scenario is more troubling to me.</p> <p>—<br /> You are receiving this because you were mentioned.<br /> Reply to this email directly, view it on GitHub<br /> <a rel="nofollow noopener" target="_blank" href="https://github.com/whatwg/html/issues/2174#issuecomment-403521462">https://github.com/whatwg/html/issues/2174#issuecomment-403521462</a>, or mute<br /> the thread<br /> <a rel="nofollow noopener" target="_blank" href="https://github.com/notifications/unsubscribe-auth/AAJMh-ujCzFRbcTjzsRoGo3Tar_7htPxks5uE3gygaJpZM4LMw6t">https://github.com/notifications/unsubscribe-auth/AAJMh-ujCzFRbcTjzsRoGo3Tar_7htPxks5uE3gygaJpZM4LMw6t</a><br /> .</p> </blockquote> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/150663?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jlebar picture"> <strong>jlebar</strong> <span class="text-muted ml-1">on 9 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>FWIW, in <a rel="nofollow noopener" target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=585653">https://bugzilla.mozilla.org/show_bug.cgi?id=585653</a> comments 5, 7 and 9, I think some of the implementation issues around having this influence or supersede <code>document.title</code> as used for tab/window titles for the loaded page are articulated well, and I think those problems haven't gone away in the intervening years.</p> <p>It seems we could reduce confusion in the spec by saying something along the lines of: The <em>title</em> provided in <code>pushState</code> and <code>replaceState</code> is only associated with the current history entry, not with the current document or browsing context. Providing it will not alter <code>document.title</code>, nor will the user agent use a history state's title as a substitute for <code>document.title</code> in its user interface as a label for a given browsing context. The user agent <em>may</em> however use the <em>title</em> as a label for a history entry in history navigation user interfaces.</p> <p>(The above probably wants word-smithing by someone more familiar with some of the relevant terminology.)</p> <p>As far as I can tell, that covers the Webkit behaviour as well as making it explicit that using it won't update tab/window labels (anywhere), which was what was originally at issue in the OP.</p> <p>It may be worth saying something similar in the "Developer's edition", with the additional hint that, if developers want the history state's title used, they can assign it to <code>document.title</code> when using push/replaceState and/or in a <code>popstate</code> event listener.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/375983?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gijsk picture"> <strong>gijsk</strong> <span class="text-muted ml-1">on 7 Nov 2019</span> </div> <div class="col text-right"> ❤<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>The thing is, the spec doesn't get to dictate what browsers do in their user interfaces. Browsers could very well use this argument to change the user interface label for the given browsing context if they wanted to. They can't change the value of <code>document.title</code>, which is derived from the <code><title></code> element, but they can update their UA using any hints they wish.</p> <p>This is similar to how specs dictate the value of <code>document.URI</code>, but do not dictate what gets displayed in the address bar.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/617481?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="domenic picture"> <strong>domenic</strong> <span class="text-muted ml-1">on 7 Nov 2019</span> </div> <div class="col text-right"> 👎<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>The thing is, the spec doesn't get to dictate what browsers do in their user interfaces.</p> </blockquote> <p>I don't really agree with this assertion, but even if I didn't object to the general case: the very reason this particular spec issue was filed is that the spec <em>does</em> say something about what browsers do in their user interfaces - something which doesn't match what people see in practice. Though the spec uses "<em>may</em>", the implication is that "some browsers do/will", and people by and large do not see that happening. That causes confusion about the spec <sup>1</sup>, as well as compat risks, which you outlined in <a rel="nofollow noopener" target="_blank" href="https://github.com/whatwg/html/issues/2174#issuecomment-403521462">your earlier comment</a>.</p> <p>If there's editor consensus that the spec shouldn't definitively say things about browser user interfaces, then perhaps the note should be removed, or replaced with some rephrasing that doesn't lead people to mistaken assumptions either way.</p> <p><sup>1</sup> <a rel="nofollow noopener" target="_blank" href="https://www.google.com/search?q=pushstate+tab+title+doesn%27t+change">https://www.google.com/search?q=pushstate+tab+title+doesn%27t+change</a> gives me at least 4 different stackoverflow hits of people complaining that <em>title</em> "doesn't work".</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/375983?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="gijsk picture"> <strong>gijsk</strong> <span class="text-muted ml-1">on 8 Nov 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(195494630, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(195494630, 1);" onclick="rate(195494630, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(195494630, 2);" onclick="rate(195494630, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(195494630, 3);" onclick="rate(195494630, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(195494630, 4);" onclick="rate(195494630, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(195494630, 5);" onclick="rate(195494630, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/html/270868217/proposal-app-html-html-type-app">Proposal: App HTML, <html type="app"></a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/1529180?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="lacolaco picture"> <strong class="pr-1" dir="ltr">lacolaco</strong>  Â·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/html/376684635/case-sensitive-matching-for-ol-type-attribute-selectors">Case-sensitive matching for ol[type] attribute selectors should be extended to author CSS for use with @counter-style</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/36453711?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="NOVALISTIC picture"> <strong class="pr-1" dir="ltr">NOVALISTIC</strong>  Â·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/html/431891509/proposal-to-add-the-attribute-format-for-input-times">Proposal: to add the attribute format for input times</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/1666156?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="FANMixco picture"> <strong class="pr-1" dir="ltr">FANMixco</strong>  Â·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/html/205413180/about-the-term-top-level-browsing-context">About the term "top-level-browsing-context"</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/18418010?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="NE-SmallTown picture"> <strong class="pr-1" dir="ltr">NE-SmallTown</strong>  Â·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/html/160501994/minimize-the-usage-of-the-incumbent-concept">Minimize the usage of the incumbent concept</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/617481?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="domenic picture"> <strong class="pr-1" dir="ltr">domenic</strong>  Â·  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/whatwg/html/issues/2174" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>