本文介绍一种基于 mutationobserver 的可靠方案，解决 tampermonkey 脚本在单页应用（spa）中无法及时捕获动态渲染链接的问题，确保 `preview order` 按钮在页面初始加载及后续分页/数据刷新后均能自动注入。

现代业务 Web 应用（尤其是基于 Angular、React 或 Vue 的 SPA）常采用异步渲染机制：HTML 骨架快速加载，而实际数据（如分页列表中的 /Field/POPendingCreate/123 链接）通过 AJAX 获取并在 DOM 中动态插入。这导致传统 document.onload 或直接绑定 onclick 事件失效——因为目标元素尚未存在，或分页切换时 DOM 变更未被监听。

你遇到的问题正是典型场景：点击分页

uni-app

uni-app 官方文档、npm 包和项目创建入口。

下载

后，新一批 元素被 JS 动态追加到 DOM，但你的脚本只在初始时刻执行一次，无法响应后续变化。

✅ 推荐解法：使用 MutationObserver 实时监听 DOM 变更
它专为监听动态内容设计，可高效捕获任意子节点的新增（childList: true）与深层嵌套变更（subtree: true），完美适配分页、搜索、Tab 切换等交互场景。

以下是完整、健壮的 Tampermonkey 脚本实现：

// ==UserScript==
// @name         Auto-Inject Preview Order Links
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Inject "Preview Order" links next to /Field/POPendingCreate/ URLs, even on dynamic pages
// @author       You
// @match        *://*your-business-app.com/*  // 替换为实际域名
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /**
     * 主逻辑：为匹配的链接旁注入 Preview Order 按钮
     * @param {Node} node - 触发变更的 DOM 节点（如新增的 

• 或
  ） */ const createLinks = function(node) { // 确保查询范围覆盖当前节点及其父容器（兼容不同插入结构） const queryElem = node.parentElement || node; const links = queryElem.querySelectorAll("a[href*='/Field/POPendingCreate/']"); for (const link of links || []) { // ✅ 防重复注入：用自定义属性标记已处理链接 if (link.createLinkReady) continue; // ? 提取 URL 中的数字 ID（更安全：使用可选链 + 默认值） const match = link.href.match(/\d+/); if (!match) continue; const ppon = match[0]; // ? 构建新链接 const a = document.createElement('a'); a.textContent = 'Preview Order'; a.title = 'Preview Order'; a.href = `https://website.com/Field/DownloadPendingPO?POPPKeyID=${ppon}&co=1&po=${ppon}`; a.target = '_blank'; a.rel = 'noopener noreferrer nofollow'; // 安全增强：防止 opener 泄露 // ➕ 插入到原链接的父节点末尾（视觉上紧邻） link.parentElement.appendChild(a); // ✅ 标记为已处理 link.createLinkReady = true; } }; // ? 初始化 MutationObserver const observer = new MutationObserver(function(mutationsList) { for (const mutation of mutationsList) { // 仅关注新增节点（忽略文本变更、属性修改等） for (const node of mutation.addedNodes) { // 过滤掉非元素节点（如文本、注释） if (node.nodeType === Node.ELEMENT_NODE) { createLinks(node); } } } }); // ? 开始监听：从 document.body 起，监控所有子节点增删及深层嵌套变化 observer.observe(document.body, { childList: true, subtree: true }); // ? 首次运行：处理页面已存在的链接（初始加载内容） createLinks(document.body); })();

  ✅ 关键优化说明：

  • 防重复注入：通过 link.createLinkReady = true 属性避免同一链接被多次添加按钮；
  • 容错增强：match?.[0] 和 if (!match) continue 避免正则无匹配时崩溃；
  • 安全合规：添加 rel="noopener noreferrer nofollow" 防止安全风险与 SEO 干扰；
  • 精准定位：createLinks() 自动向上查找父容器，适应不同 DOM 结构（如链接可能在
  • 、
    或 内）；
  • 零依赖：纯原生 JS，无需 jQuery 或额外库。

  ⚠️ 注意事项：

  • 将 @match 行中的 *://*your-business-app.com/* 替换为你的实际业务域名（支持通配符，如 https://app.example.org/*）；
  • 若目标链接路径含特殊字符（如中文、空格），建议对 ppon 进行 encodeURIComponent(ppon) 编码（当前示例假设为纯数字）；
  • 如需控制按钮样式（如添加 CSS 类、调整位置），可在 a 元素创建后调用 a.classList.add('preview-btn') 并注入 CSS。

  此方案彻底规避了“猜测加载时机”的陷阱，以声明式监听替代脆弱的定时轮询或事件绑定，是 Tampermonkey 处理动态 Web 应用的工业级实践。