JS 注入添加目录索引：点击跳转到对应位置

使用 JavaScript 注入方式为网页添加目录索引，点击目录中的链接可以跳转到对应位置。本文提供两种方法：将目录索引添加到页面开头和创建悬浮窗显示目录索引。

如何用 js 注入方式为网页增加目录索引点击可以跳转到对应位置

1. 将目录索引添加到页面开头

可以使用 JavaScript 获取页面中所有需要添加到目录索引的标题元素，添加一个列表并将列表项添加为超链接，使其可以跳转到对应的标题。下面是一个示例代码：

// 获取所有需要添加到目录的标题元素
var titles = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// 创建一个目录列表
var tableOfContents = document.createElement('ul');

// 遍历所有标题元素，并创建相应的列表项
for(var i = 0; i < titles.length; i++) {
  // 获取当前标题的文本内容和 ID
  var titleText = titles[i].textContent;
  var titleId = titles[i].getAttribute('id');

  // 如果标题没有 ID，则为其生成一个
  if(titleId === null) {
    titleId = 'section' + i;
    titles[i].setAttribute('id', titleId);
  }

  // 创建列表项
  var listItem = document.createElement('li');

  // 创建超链接，并设置其 href 属性为对应标题的 ID
  var link = document.createElement('a');
  link.setAttribute('href', '#' + titleId);
  link.textContent = titleText;

  // 将超链接添加到列表项中
  listItem.appendChild(link);

  // 将列表项添加到目录列表中
  tableOfContents.appendChild(listItem);
}

// 将目录列表添加到页面中
document.body.insertBefore(tableOfContents, document.body.firstChild);

此代码将获取页面中所有的标题元素（h1, h2, h3, h4, h5, h6），并为每个标题创建一个超链接列表项，使它可以跳转到对应的位置。然后将目录列表添加到页面的开头。请注意，如果标题没有 ID，则代码将为其生成一个新的 ID。这可能会影响其他脚本和样式表中使用到这些标题的代码。如果您想要避免这种情况，您可以手动为每个标题元素添加一个 ID。

2. 创建悬浮窗显示目录索引

可以使用 JavaScript 创建一个悬浮窗，将目录索引添加到其中，并将其固定在页面的右侧。下面是一个示例代码：

// 获取所有需要添加到目录的标题元素
var titles = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// 创建一个目录列表
var tableOfContents = document.createElement('ul');

// 遍历所有标题元素，并创建相应的列表项
for(var i = 0; i < titles.length; i++) {
  // 获取当前标题的文本内容和 ID
  var titleText = titles[i].textContent;
  var titleId = titles[i].getAttribute('id');

  // 如果标题没有 ID，则为其生成一个
  if(titleId === null) {
    titleId = 'section' + i;
    titles[i].setAttribute('id', titleId);
  }

  // 创建列表项
  var listItem = document.createElement('li');

  // 创建超链接，并设置其 href 属性为对应标题的 ID
  var link = document.createElement('a');
  link.setAttribute('href', '#' + titleId);
  link.textContent = titleText;

  // 将超链接添加到列表项中
  listItem.appendChild(link);

  // 将列表项添加到目录列表中
  tableOfContents.appendChild(listItem);
}

// 创建一个悬浮窗
var sidebar = document.createElement('div');
sidebar.style.position = 'fixed';
sidebar.style.top = '50px';
sidebar.style.right = '20px';
sidebar.style.width = '200px';
sidebar.style.padding = '10px';
sidebar.style.backgroundColor = '#f0f0f0';
sidebar.appendChild(tableOfContents);

// 将悬浮窗添加到页面中
document.body.appendChild(sidebar);

此代码将获取页面中所有的标题元素（h1, h2, h3, h4, h5, h6），并为每个标题创建一个超链接列表项，使它可以跳转到对应的位置。然后将目录列表添加到一个新创建的悬浮窗中，并将其固定在页面的右侧。请注意，您可以根据需要更改悬浮窗的样式和位置。

注意： JS 注入可能会存在安全风险，并且应该谨慎使用。建议仅在必要时使用它，并确保验证任何用户输入数据以防止潜在的恶意攻击。