使用 Greasemonkey 在现有元素之前插入文本节点时出现问题

Problems inserting a text node before an existing element using Greasemonkey

本文关键字：节点 插入文本 问题 Greasemonkey 元素 使用      更新时间：2023-09-26

我有一个脚本可以获取当前服务器时间，并且效果很好。 问题是，我想在页面上的时钟之前插入服务器时间（即使网站上的活动告诉您可以在特定的服务器时间再次执行此操作，也会显示本地时间）。 出于某种原因，我不知道如何将的东西粘在我想要的地方。

无需登录即可访问的目标页面位于此处

我想在之前插入节点的div 的 id 似乎clock-wrapper

我尝试过的代码：（插入警报和控制台之间.log，在下面的"原始脚本"中）

var textNode = document.createElement('b');
var clock=document.getElementById('clock-wrapper');
textNode.appendChild ('<b>' + serverTime + '</b>');
clock.parentNode.insertBefore(textNode, clock);

和

var textNode = document.createElement('b');
var getRef = document.getElementById("clock-wrapper");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(textNode, getRef);


以下是原始脚本：

// ==UserScript==
// @name      test server time
// @namespace http://trueidiocy.us
// @include   https://www.google.com
// @include   http://stackoverflow.com
// @include   http://www.thepikaclub.co.uk*
// @require   http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant     GM_xmlhttpRequest
// ==/UserScript==
GM_xmlhttpRequest ( {
    url: location.href,
    method: "HEAD",
    onload: function (rsp) {
        var serverTime  = "Server date not reported!";
        var RespDate    = rsp.responseHeaders.match (/'bDate:'s+ (.+?) (?:'n|'r)/i);
        if (RespDate && RespDate.length > 1) {
            serverTime  = RespDate[1];
        }
        alert ("Server Time: " + serverTime);
        console.log ("Server Time: ", serverTime);
    }
} );


我在这里错过了什么？ 我只需要找到一个比将来的脚本更好的参考源吗？ 另外，让脚本再次运行以每分钟左右更新一次时间有多难？

问题

中的第一个代码片段无效（appendChild调用错误），但第二个代码片段可以工作 - 除了<b>标签是用空内容添加的。

无论如何，由于您的基本脚本正在（明智地）加载jQuery，请使用它。 jQuery的.before()在这里效果很好。 代码将是：

GM_xmlhttpRequest ( {
    url:    location.href,
    method: "HEAD",
    onload: function (rsp) {
        var serverTime  = "Server date not reported!";
        var RespDate    = rsp.responseHeaders.match (/'bDate:'s+(.+?)(?:'n|'r)/i);
        if (RespDate  &&  RespDate.length > 1) {
            serverTime  = RespDate[1];
        }
        $("#clock-wrapper").before ('<b>' + serverTime + '</b>');
    }
} );

如果你想每分钟重新获取服务器时间，请使用javascript的setInterval()。 除了您需要避免创建多个 <b> 标记，因此代码需要额外检查。 它变成：

getServerTime (); //-- Initial call
//-- Recheck every minute
var clkRefreshTimer = setInterval (getServerTime, 60 * 1000); // 60 seconds
function getServerTime () {
    GM_xmlhttpRequest ( {
        url:    location.href,
        method: "HEAD",
        onload: function (rsp) {
            var serverTime  = "Server date not reported!";
            var RespDate    = rsp.responseHeaders.match (/'bDate:'s+(.+?)(?:'n|'r)/i);
            if (RespDate  &&  RespDate.length > 1) {
                serverTime  = RespDate[1];
            }
            //-- Does our display node already exist?
            var ourTimeDisp = $("#gmTimeDisplay");
            if (ourTimeDisp.length) {
                ourTimeDisp.text (serverTime);
            }
            else {
                $("#clock-wrapper").before (
                    '<b id="gmTimeDisplay">' + serverTime + '</b>'
                );
            }
        }
    } );
}

但是，您可能很聪明地查找如何将JS时钟添加到页面，并且只调用GM_xmlhttpRequest一次以初始化新时钟。 然后你的时钟JS会随心所欲地更新它，而不会加剧服务器。

相关文章：