按钮处理和图层可见性在油脂猴子

Button handling and layer visibility in Greasemonkey

本文关键字：油脂 猴子 可见性 图层 处理 按钮      更新时间：2023-09-26

我有一个为游戏创建的Greasemonkey脚本。我们的想法是，当点击页面上的按钮(这是我的脚本添加的)时，在div中弹出有关游戏的信息。

我使用z-index是因为当我在游戏屏幕顶部显示div时，一些图像会显示出来。基本上，我需要做的是根据变量的值和/或按钮点击改变div的z-index。但是，当我点击我的按钮时，我不能让我的div来到前面。

到目前为止我写的是:

// ==UserScript==
// @name            Test Script
// @namespace       http://therealmsbeyond.com/
// @description     Test
// @include         an_include.js
// @include         another_include.js
// @require         json.js
// ==/UserScript==
var VERSION = 1;
var WEBSITEURL = 'http://therealmsbeyond.com/';
var SCRIPTNAME = 'Test';
var SENDINFODELAY = 600000;
var UPDATEDELAY = 604800000;
var ZINDEX_UNDER = -100;
var ZINDEX_OVER = 111111;
var Options = {
    'mapVisible' : false,
    'showHostile' : false,
    'showAlliance' : false,
    'showBookmarks' : false
}
function custom_setValue(k,v){
    GM_setValue(k,v);
}
function custom_getValue(k,dv){
    return(GM_getValue(k,dv));
}
function custom_deleteValue(k){
    GM_deleteValue(k);
}
function getSavedInfo(){
    return(custom_getValue('ajaxparams',null));
}
function getSavedServerId(){
    return(custom_getValue('sid'));
}
var e = document.createElement('div');
    var idAttr = document.createAttribute('id');
    var styleAttr = document.createAttribute('style');
    idAttr.nodeValue = 'shadow_map_container';
    styleAttr.nodeValue = 'background-color:white;top:150px;left:75px;position:absolute;height:600px;width:600px;';
    e.setAttributeNode(idAttr);
    e.setAttributeNode(styleAttr);
    var c = '<strong>This is the map window.</strong>';
    e.innerHTML = c;
    document.body.appendChild(e);
if(Options.mapVisible == true)
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
}
else
{
    document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
}
function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
}
var btnStr = '<a class="navTab" target="_top" onclick="showHide();return false;" href="javascript:void(0)"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;

这不是z-index的问题，这是编码风格和事件监听器的问题。

您不能在Greasemonkey脚本中以这种方式激活按钮。showHide()驻留在GM沙盒中，页面的JS无法从onclick到达它。
(这是避免使用内联JS的另一个原因。)

在本例中，您将像这样激活链接:

function showHide()
{
    if(Options.mapVisible == true)
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_UNDER;
        Options.mapVisible = false;
    }
    else
    {
        document.getElementById('shadow_map_container').style.zIndex = ZINDEX_OVER;
        Options.mapVisible = true;
    }
    return false;
}
var btnStr = '<a class="navTab" target="_top"><span>Shadow Mapper</span></a>';
var myNavContainer = document.getElementById('main_engagement_tabs');
var inner = myNavContainer.innerHTML;
var newStr = btnStr + inner;
myNavContainer.innerHTML = newStr;
var btn = document.querySelector (".main_engagement_tabs > a.navTab");
btn.addEventListener ("click", showHide, true);
相关文章：