使用 javascript 动态构建 html 标题标签

Posted 2023-02-16

【中文标题】使用 javascript 动态构建 html 标题标签

【英文标题】：build an html title tag dynamically with javascript

【发布时间】：2012-09-08 18:20:15

【问题描述】：

我正在开发的网站上有很多页面，其中每个页面都有自己的标题标签。在许多情况下，标题都有固定文本，例如：

首页 |第 1 节 |第 1 页 主页 |第 1 节 |第 2 页 主页 |第 1 节 |第 3 页等...

插入这些标题会使以后的更改更加困难，更不用说记住添加它们的麻烦了。我正在寻找一种方法，根据页面在站点文件夹结构中的位置，使用 javascript 动态生成每个页面的标题。

我目前正在使用一个对面包屑执行类似操作的脚本，但我不确定如何引用相同的脚本，或者为页面标题构建一个类似的脚本。面包屑脚本在这里：http://trcreative.us/dev/jmsracing/js/breadcrumbs.js

并且在大多数情况下完全按照我对标题的需要，减去每个面包屑项目的链接。 （显然，我不希望它为标题这样做）。

查看此处应用的面包屑：http://trcreative.us/dev/jmsracing/races/pigman-long-and-olympic/

任何帮助将不胜感激。谢谢你

【问题讨论】：

如果您正在构建一个大型网站，您的 CMS 或框架必须已经能够做到这一点。

我正在构建网站自定义。不是通过诸如 wordpress 或 Joomla 之类的 CMS。基本上是开发页面和上传文件到服务器。

【参考方案1】：

在 JQuery 中试试这段代码

<script type="text/javascript">
  $(document).ready(function() 
    document.title = 'your page title goes here';
  );
</script>

【讨论】：

这与向页面添加标题有何不同。我仍然需要在页面级别拥有它。理想情况下，您添加了“您的页面标题在此处”，我想要动态生成的标题（例如在我的面包屑中

你能解释一下这个应该添加到html页面的什么地方来替换标题吗？我在测试页面上看到的只是我添加的静态标题。代码不适用。

【参考方案2】：

document 对象有一个title 属性，可以像这样显式设置：

document.title = "some_title_here";

【讨论】：

我不想替换标题。我正在尝试根据页面在我网站的文件夹结构中的位置生成动态标题。

【参考方案3】：

假设您的网址如下home/section/page.html，您可以在任何页面的顶部使用此功能，如果您的意思是这样，它将根据网址设置标题。

function setTitle(extra) 
  document.title = location.pathname.split('/').map(function(v) 
    return v.replace(/\.(html|php)/, '')
      .replace(/^\w/, function(a)  return a.toUpperCase(); );
  ).join(' | ') + (extra && ' | '+ extra);

使用这个函数会生成一个像这样的标题：Home | Section | Page。如果您想为特定页面添加特定内容，则将字符串作为extra 参数传递，它将被添加到标题中。

// url: http://mypage.com/home/about/frogs    
setTitle('Frogs are awesome');
console.log(document.title); //=> Home | About | Frogs | Frogs are awesome

【讨论】：

这正是我正在寻找的。谢谢！但是，它似乎不适用于我的页面。我将脚本放在脚本标签内，但在上传时，它不适用于页面标题。请指教...

我大部分时间都想出了如何执行代码，但是我有几个问题。 1) 如何消除动态显示标题中的某些特殊字符，例如破折号和下划线。我尝试添加几行代码失败。 2.）我如何做到这一点，而不是在字符串末尾添加其他文本（如您的示例所示），我的唯一页面值仅替换动态页面值。例如，添加“Frogs are awsome”将替换“Frogs”的动态值。

最后，3）如何将默认 Root 值设置为独特的值，例如“Home”

1) 将 regexp 和 replace() 与 '' 一起使用您的字符 2) 使用 pop() 有条件地删除数组中的最后一项 3) 添加一个参数 root 并删除第一项有条件地使用shift() 数组，然后在前面加上root

我会试一试，但我还不是 JS 专家 :) 你能给我看一个修改过的原始代码示例吗？在这里查看我最近的尝试：view-source:trcreative.us/dev/jmsracing/races/pigman-long-and-olympic/…

【参考方案4】：

你可以使用类似的东西（如果使用 javascript）

var getTitleOfPage = function()
    // logic here to work out the title of the page.
;

var title = getTitleOfPage();
document.title = title;

或者，您也可以使用您正在使用的任何服务器端语言来设置标题。

【讨论】：

理想情况下，如果您发现重复代码，您甚至可以将其合并到您的面包屑脚本中。