Как взять текст, содержащийся на веб-странице, и сделать его частью заголовка страницы?

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 запускается до того, как большинство AJAX-страниц завершают работу . Таким образом, вы должны использовать такие методы, как 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;
}