Обработка кнопок и видимость слоя в Greasemonkey - PullRequest
Новая
       35

Обработка кнопок и видимость слоя в Greasemonkey

1 голос
/ 25 августа 2011

У меня есть скрипт Greasemonkey, который я создавал для игры. Идея состоит в том, чтобы иметь информацию об игре в div, которая будет появляться при нажатии кнопки (которая добавлена ​​моим сценарием) на странице.

Я использую z-index, потому что, когда я просто отображаю div в верхней части игрового экрана, некоторые изображения просвечивают. Итак, в основном мне нужно изменить z-индекс моего div на основе значения переменной и / или нажатия кнопки. Тем не менее, я не могу заставить мой 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;

1 Ответ

1 голос
/ 26 августа 2011

Это не проблема 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);
...