如何获取网页中包含的文本并将其作为页面标题的一部分？

Question

我迫切需要帮助编写一个 Tampermonkey/Greasemonkey 脚本，该脚本获取网页中的部分信息并使其成为页面（和 window）标题的一部分。

客户名称是目标（内部）网页的一部分，并在 HTML:

中清楚地标明

<div id="patient-info" class="ehr-patients-info">
    <div id="patient-identification">
        <span title="" id="patient-name">
            Johnnyfirst

            Smithylast
        </span>
    </div>
...

我想将文本 "Johnnyfirst Smithylast" 添加到 window 标题并尝试过：

var ptname = document.getElementById("patient-name") ;
document.title = document.title + " | Name: " + ptname ;

但这导致标题如下：...| Name: null.

第二个问题是，我搭载此用户脚本的网站并没有立即全部加载。在初始页面加载后，有大量 javascript 功能加载页面的各个部分并最终显示客户端名称，如上所示。

当我尝试 $(window).on('load', function() { ... }) 或 $(document).ready() 时，它似乎正在作用于尚未完全加载信息的初步版本的网页。

Answer 1

您的目标页面是 AJAX 驱动的并且 Greasemonkey/Tampermonkey fires way before most AJAX page loads finish。因此，您必须使用 MutationObserver、waitForKeyElements 等技术来补偿。

例如，这是一个完整的 Tampermonkey 脚本，它会在找到 patient-name 节点时更改标题：

// ==UserScript==
// @name     _Put the patient Name in the title
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @noframes
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
// @grant    none
//- The @grant directives are needed to restore the proper sandbox.
/* global waitForKeyElements */
/* eslint-disable no-multi-spaces, curly */
'use strict';

waitForKeyElements ("#patient-name, .patient-name", scrapeTextToTitle);

function scrapeTextToTitle (jNode) {
    var nameRaw         = jNode.text ().trim ();
    var nameSanitized   = nameRaw.replace (/\s+/g, " ");
    document.title     += " | Name: " + nameSanitized;
}

如何获取网页中包含的文本并将其作为页面标题的一部分？

How do I take text contained in web page and make it part of the page title?

userscripts

tampermonkey

greasemonkey-4