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

Question

我在编写 Tampermonkey/Greasemonkey 脚本时急需帮助，该脚本获取网页中的部分信息并使其成为页面（和窗口）标题的一部分。

客户名称是目标（内部）网页的一部分，并在 HTML 中明确标记：

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

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

我想将文本“Johnnyfirst Smithylast”添加到窗口标题并尝试：

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;
}