先说清楚：窗口名称到底指什么
窗口名称通常指浏览器窗口或标签页上显示的那段文字。对网页来说，这段文字主要来自HTML的
标签或运行时通过JavaScript修改的document.title；对通过API创建的外壳应用（桌面客户端），标题由窗口创建/更新的API决定。窗口名称是用户识别页面、书签、任务栏和历史记录的重要信息，所以要认真对待。</p>
<p><h2><span class="ez-toc-section" id="%E4%B8%89%E7%A7%8D%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%88%E4%BB%8E%E6%9C%80%E7%AE%80%E5%8D%95%E5%88%B0%E7%A8%8D%E5%A4%8D%E6%9D%82%EF%BC%89"></span>三种常用方法（从最简单到稍复杂）<span class="ez-toc-section-end"></span></h2>
</p>
<p><h3><span class="ez-toc-section" id="1_HTML_%E7%9A%84_%E6%A0%87%E7%AD%BE%EF%BC%88%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2%EF%BC%89"></span>1. HTML 的 <title> 标签（静态页面）<span class="ez-toc-section-end"></span></h3>
</p>
<p>最直接最经典的方法就是在HTML头部写一个<title>标签，例如：</p>
<p><em><title>产品页 – 我们的品牌</title></em></p>
<p>这是搜索引擎和浏览器默认取名字的地方，适合静态页面或服务端渲染的页面。优点是简单、被SEO和社交抓取广泛采用；缺点是对动态内容（单页应用）不够灵活。</p>
<p><h3><span class="ez-toc-section" id="2_JavaScript_%E4%BF%AE%E6%94%B9_documenttitle%EF%BC%88%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0%EF%BC%89"></span>2. JavaScript 修改 document.title（动态更新）<span class="ez-toc-section-end"></span></h3>
</p>
<p>单页应用（SPA）或需要根据用户操作实时改变标题的页面，会在代码里动态设置：</p>
<ul>
<li><strong>纯JS：</strong>document.title = ‘新标题’;</li>
<li><strong>React：</strong>在路由变更或组件挂载时调用 document.title；也可用 react-helmet 之类库统一管理。</li>
<li><strong>Vue：</strong>可在路由元信息里写 title，并在全局路由守卫里设置 document.title。</li>
</ul>
<p>优点是可以反映当前状态（比如“收件箱（3）”），缺点是如果不注意，用户或爬虫可能会看到短暂不一致状态。</p>
<p><h3><span class="ez-toc-section" id="3_windowopen_%E7%9A%84_name_%E5%8F%82%E6%95%B0%E4%B8%8E_windowname%EF%BC%88%E7%AA%97%E5%8F%A3%E9%97%B4%E9%80%9A%E4%BF%A1%EF%BC%89"></span>3. window.open 的 name 参数与 window.name（窗口间通信）<span class="ez-toc-section-end"></span></h3>
</p>
<p>当你用 window.open 打开新窗口时，可以传入第二个参数 name，例如：</p>
<p><em>const win = window.open(‘https://example.com’, ‘myPopup’);</em></p>
<p>这个 name 一方面用于指定目标窗口（后续链接 target），另一方面也会设置新窗口的 window.name 属性。需要注意：</p>
<ul>
<li>window.name 在跨域导航后仍然保持，常被用于在不同域间短期传值（但有安全风险）。</li>
<li>浏览器并不会强制把这个 name 显示在标题栏；标题的可见文本仍由页面的 title 或者窗口API决定。</li>
</ul>
<p><h2><span class="ez-toc-section" id="%E6%A1%8C%E9%9D%A2%E7%B1%BB%E5%AE%A2%E6%88%B7%E7%AB%AF%EF%BC%88%E4%BE%8B%E5%A6%82_Electron_%E6%88%96_WebView%EF%BC%89%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86"></span>桌面类客户端（例如 Electron 或 WebView）如何处理<span class="ez-toc-section-end"></span></h2>
</p>
<p>如果你是在做桌面应用或内部浏览器壳，通常有专门的窗口API：</p>
<table>
<tr>
<td><strong>平台/框架</strong></td>
<td><strong>设置方式</strong></td>
</tr>
<tr>
<td>Electron</td>
<td>BrowserWindow 构造时或之后用 win.setTitle(‘标题’)</td>
</tr>
<tr>
<td>NW.js / 原生WebView</td>
<td>各自提供的窗口API或宿主层方法</td>
</tr>
</table>
<p>这类API能更直接控制窗口标题栏，不依赖页面的 <title>，适合需要展示应用名、用户状态等信息的场景。</p>
<p><h2><span class="ez-toc-section" id="%E4%B8%8D%E5%90%8C%E5%B9%B3%E5%8F%B0%E7%9A%84%E6%98%BE%E7%A4%BA%E5%B7%AE%E5%BC%82%EF%BC%88%E4%BD%A0%E6%80%BB%E8%A6%81%E6%B5%8B%E8%AF%95%EF%BC%89"></span>不同平台的显示差异（你总要测试）<span class="ez-toc-section-end"></span></h2>
</p>
<ul>
<li><strong>桌面浏览器：</strong>标签页和窗口标题通常显示 document.title；任务栏和窗口管理器也由此生成缩略或标题文本。</li>
<li><strong>移动端浏览器：</strong>很多浏览器不会一直显示完整标题，或者在地址栏/标签列表中截断，PWA 在安装后可能显示 manifest 中的 name。</li>
<li><strong>搜索引擎与社交平台：</strong>SEO 更看重 title 标签与 meta 数据（og:title），而非 runtime 改动（尽管有时也会抓取动态内容）。</li>
</ul>
<p><h2><span class="ez-toc-section" id="%E5%AE%89%E5%85%A8%E4%B8%8E%E9%9A%90%E7%A7%81%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"></span>安全与隐私注意事项<span class="ez-toc-section-end"></span></h2>
</p>
<p>窗口标题会出现在任务管理器、历史记录、窗口切换列表、截图里，所以千万不要把敏感数据放到标题中。例如不要在标题里显示明文的邮箱、验证码、令牌、身份证号等。另一个需要注意的点是 window.name 的持久性和跨域特征：恶意页面可能利用它进行信息泄露或被动跟踪，使用时要做好清理。</p>
<p><h2><span class="ez-toc-section" id="%E5%AF%B9SEO%E3%80%81%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E4%B8%8E%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E7%9A%84%E5%BD%B1%E5%93%8D"></span>对SEO、可访问性与用户体验的影响<span class="ez-toc-section-end"></span></h2>
</p>
<p>标题不仅是视觉标签，还承担可访问性和搜索引擎信号：</p>
<ul>
<li><strong>SEO：</strong>标题是页面最重要的元素之一，应该简明扼要，包含核心关键词，但避免堆砌。</li>
<li><strong>可访问性：</strong>屏幕阅读器会读出标题，确保语义清晰，避免奇怪的符号或过长的标题。</li>
<li><strong>用户体验：</strong>建议把品牌放到标题末尾，比如“功能描述 – 品牌名”，便于用户在多个标签中快速识别。</li>
</ul>
<p><h2><span class="ez-toc-section" id="%E5%B8%B8%E8%A7%81%E5%9C%BA%E6%99%AF%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%AD%A5%E9%AA%A4%EF%BC%88%E5%8F%AF%E7%9B%B4%E6%8E%A5%E7%85%A7%E6%8A%84%EF%BC%89"></span>常见场景的实现步骤（可直接照抄）<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="%E9%9D%99%E6%80%81%E7%AB%99%E7%82%B9"></span>静态站点<span class="ez-toc-section-end"></span></h3>
</p>
<ul>
<li>在每个 HTML 页面的 <head> 写好 <title>。</li>
<li>为多语言页面分别生成对应的 title。</li>
</ul>
<p><h3><span class="ez-toc-section" id="%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8%EF%BC%88ReactVueAngular%EF%BC%89"></span>单页应用（React/Vue/Angular）<span class="ez-toc-section-end"></span></h3>
</p>
<ul>
<li>在路由配置里为每个路由写入 title 元数据。</li>
<li>在路由切换时执行 document.title = route.meta.title || defaultTitle。</li>
<li>必要时用第三方库（react-helmet、vue-meta）统一管理。</li>
</ul>
<p><h3><span class="ez-toc-section" id="%E6%89%93%E5%BC%80%E5%BC%B9%E7%AA%97%E5%B9%B6%E5%B8%8C%E6%9C%9B%E5%AE%83%E6%9C%89%E7%89%B9%E5%AE%9A%E6%A0%87%E9%A2%98"></span>打开弹窗并希望它有特定标题<span class="ez-toc-section-end"></span></h3>
</p>
<ul>
<li>打开时传入 window.open 的 URL，页面本身应包含合适的 <title>。</li>
<li>如果无法修改目标页面，可在打开后通过脚本注入（前提是同源）来设置 document.title。</li>
</ul>
<p><h2><span class="ez-toc-section" id="%E4%B8%80%E4%B8%AA%E6%AF%94%E8%BE%83%E8%A1%A8%EF%BC%9A%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%E4%BC%98%E5%8A%A3%E5%AF%B9%E6%AF%94"></span>一个比较表：常用方法优劣对比<span class="ez-toc-section-end"></span></h2>
</p>
<table>
<tr>
<td><strong>方法</strong></td>
<td><strong>优点</strong></td>
<td><strong>缺点</strong></td>
</tr>
<tr>
<td><title></td>
<td>简单、SEO友好、兼容性好</td>
<td>静态，不适合动态UI</td>
</tr>
<tr>
<td>document.title</td>
<td>动态、实时反映状态</td>
<td>需要在客户端维护，SEO抓取不稳定</td>
</tr>
<tr>
<td>window.open name / window.name</td>
<td>跨窗口识别、可作为通信手段</td>
<td>可能有安全和跨域风险</td>
</tr>
<tr>
<td>窗口API（Electron等）</td>
<td>完全控制、适用于桌面应用</td>
<td>仅适用于宿主应用</td>
</tr>
</table>
<p><h2><span class="ez-toc-section" id="%E5%AE%9E%E6%88%98%E5%BB%BA%E8%AE%AE%E6%B8%85%E5%8D%95%EF%BC%88Checklist%EF%BC%89"></span>实战建议清单（Checklist）<span class="ez-toc-section-end"></span></h2>
</p>
<ul>
<li>在开发早期确定标题规范（品牌位置、长度限制、语言）。</li>
<li>动态页面确保在路由变更后更新 document.title，避免短暂错位。</li>
<li>不要在标题中放置密码或敏感数据。</li>
<li>为不同语言提供本地化标题，并测试语言切换时的显示。</li>
<li>在移动设备、桌面、PWA 中分别检查显示效果。</li>
<li>为社交分享设置 og:title、twitter:title，以控制预览文本。</li>
</ul>
<p><h2><span class="ez-toc-section" id="%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%EF%BC%88FAQ%EF%BC%89"></span>常见问题（FAQ）<span class="ez-toc-section-end"></span></h2>
<h3><span class="ez-toc-section" id="%E9%97%AE%EF%BC%9Awindowname_%E4%BC%9A%E8%A2%AB%E6%98%BE%E7%A4%BA%E5%9C%A8%E6%A0%87%E7%AD%BE%E9%A1%B5%E5%90%97%EF%BC%9F"></span>问：window.name 会被显示在标签页吗？<span class="ez-toc-section-end"></span></h3>
</p>
<p>答：不直接。标签页的可见名称通常来自 document.title，而 window.name 是脚本层面的属性，主要用于目标定位和持久化数据。浏览器不会把 window.name 自动当作标题展示。</p>
<p><h3><span class="ez-toc-section" id="%E9%97%AE%EF%BC%9A%E4%BF%AE%E6%94%B9_title_%E4%BC%9A%E5%BD%B1%E5%93%8D_SEO_%E5%90%97%EF%BC%9F"></span>问：修改 title 会影响 SEO 吗？<span class="ez-toc-section-end"></span></h3>
</p>
<p>答：搜索引擎更倾向于读取初始的 <title>。如果页面主要内容通过客户端渲染，建议采用服务端渲染或预渲染，让搜索引擎抓到正确的 title。</p>
<p><h2><span class="ez-toc-section" id="%E6%88%91%E8%87%AA%E5%B7%B1%E5%B8%B8%E5%B8%B8%E8%BF%99%E6%A0%B7%E5%81%9A%EF%BC%88%E8%AF%B4%E7%82%B9%E4%B8%AA%E4%BA%BA%E7%BB%8F%E9%AA%8C%EF%BC%89"></span>我自己常常这样做（说点个人经验）<span class="ez-toc-section-end"></span></h2>
</p>
<p>做过几个项目后，我会把品牌名放标题末尾，主信息放前面，长度控制在 50–70 字符内；单页应用统一由路由管理 title，必要时在重要页面加上描述性字幕供社交平台抓取。偶尔会发现移动端把标题截断，于是加了一个缩略版标题供移动端显示——这是临时权宜之计，但实际效果比一刀切要好。</p>
<p>写到这里，顺便提醒一句：把标题当成对用户的第一句问候，用心但别过度暴露。想起来要试下在不同浏览器和系统里把同一个标题看一遍，体验差异往往会给你一些意外的启发。</p>
</div>
<div class="nextorprev">
</div>
</div>
</div>
</section>
<footer id="contact" class="footer">
<div class="footer-bottom">
<p>Copyright ©2018-<script>document.write(new Date().getFullYear());</script> 比特浏览器科技有限公司. All rights reserved</p>
</div>
</footer>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/assets/../*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="ez-toc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""};
//# sourceURL=ez-toc-scroll-scriptjs-js-extra
</script>
<script id="ez-toc-scroll-scriptjs-js" src="https://bitbrowsertta.cn/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.71"></script>
<script id="ez-toc-js-cookie-js" src="https://bitbrowsertta.cn/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1"></script>
<script id="ez-toc-jquery-sticky-kit-js" src="https://bitbrowsertta.cn/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2"></script>
<script id="ez-toc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"\u003Cspan class=\"\"\u003E\u003Cspan class=\"eztoc-hide\" style=\"display:none;\"\u003EToggle\u003C/span\u003E\u003Cspan class=\"ez-toc-icon-toggle-span\"\u003E\u003Csvg style=\"fill: #999;color:#999\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"\u003E\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"\u003E\u003C/path\u003E\u003C/svg\u003E\u003Csvg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"\u003E\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/span\u003E","chamomile_theme_is_on":""};
//# sourceURL=ez-toc-js-js-extra
</script>
<script id="ez-toc-js-js" src="https://bitbrowsertta.cn/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.71-1739374418"></script>
<script id="site-main-js-extra">
var THEME = {"assets":"https://bitbrowsertta.cn/wp-content/themes/assets/../assets","home":"https://bitbrowsertta.cn/","windows":"https://bitbrowsertta.cn/windows","blogs":"https://bitbrowsertta.cn/blogs"};
//# sourceURL=site-main-js-extra
</script>
<script id="site-main-js" src="https://bitbrowsertta.cn/wp-content/themes/assets/../assets/js/external_load.js?v=1.1&ver=1.0"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://bitbrowsertta.cn/wp-includes/js/wp-emoji-release.min.js?ver=7.0"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://bitbrowsertta.cn/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>