如何在页面一侧的浮动框中显示我的用户脚本的输出？

Question

我正在研究Unicreatures的用户脚本,用于跟踪探索期间的事件.它工作(好吧,它工作,但仍然需要一些工作大声笑)但我需要一种方法来显示我正在收集的信息,不涉及每个步骤的弹出警报.

如何在页面上创建一个框并在其中显示内容？

我想在这个页面的菜单左侧创建一个框架,窗口,并在我的脚本运行时将各种变量的值写入其中.

我正在localStorage中收集这些数据,所以我的脚本将首先更新各种localStorage属性,然后以某种方式在此框中显示结果:

localStorage.steps = Number(localStorage.steps) + 1;
displayValueInFloatingBox(localStorage.steps + ' in Sargasso' );

我还想在此框中添加一个按钮来重置这些属性的值,这样我就可以选择永久保持跟踪,或者只选择一两个会话,而不必每次都编辑脚本(特别是如果我决定的话)分享剧本).我假设这只是将变量设置为零,所以我只需要知道如何创建按钮并使它做某事......这可能会以某种方式使用eventListener.

请坚持使用简单的JavaScript,没有jQuery ......我现在还没有获得JavaScript.请解释答案,这样我就能理解某些东西是如何工作的 - 我不仅仅希望代码片段让我回到类似的问题,因为我不明白为什么会使用一些代码.

附录A:我目前的脚本

// ==UserScript==
// @name Unicreatures Egg pop-up
// @namespace Unicreatures Egg pop-up
// @description Unicreatures Egg pop-up
// @include http://unicreatures.com/explore.php*
// @include http://www.unicreatures.com/explore.php*
// ==/UserScript==
var regexp = /You find an? (Exalted )?(.*?) egg nearby/;
var match = regexp.exec( document.body.innerHTML );
if ( match ) {
  if ( match[1] ) {
      alert( "Exalted egg found: " + match[2] );
  } else {
      alert( "Normal egg found: " + match[2] );
  }
}
var y = document.body.innerHTML;
var links = document.getElementsByTagName( 'a' );

for ( var i = 0; i < links.length; i++ ) {
var link = links[i];
if ( /area=sea(?!\&gather)/.test( link.href )) {
      link.addEventListener( 'click', function () {
      localStorage.steps=Number(localStorage.steps)+1
      // alert(localStorage.steps + ' in Sargasso' );
    }, true );
  }
}

//document.addEventListener('click', function(){alert('page clicked')}, true);

if(y.indexOf("You find a Noble")> 0)
{
  alert('Noble Egg Alert');
}

if(y.indexOf("You find an Exalted")> 0)
{
  localStorage.exaltedEggCount=Number(localStorage.exaltedEggCount)+1;
  alert('Exalted Egg Alert '+localStorage.exaltedEggCount);
}

if(y.indexOf("egg nearby!")> 0)
{
  localStorage.eggCount=Number(localStorage.eggCount)+1;

  alert('Egg Alert '+localStorage.eggCount);
}

Answer 1

这是将一个框添加到页面左上角的一种简单方法.首先,我们需要创建一个div元素作为框.(其他HTML元素也可以使用,但它div是一个很好的选择,因为它没有特殊含义,它只是一个简单的容器.)

var box = document.createElement( 'div' );

我们将为我们的盒子提供一个ID,以便我们稍后可以找到它document.getElementsById(),以便我们可以使用CSS来设置它:

box.id = 'myAlertBox';

现在我们需要设置框的样式.由于我们使用的是GreaseMonkey,我们可以使用GM_addStyleCSS样式规则添加到文档中:

GM_addStyle( 
    ' #myAlertBox {             ' +
    '    background: white;     ' +
    '    border: 2px solid red; ' +
    '    padding: 4px;          ' +
    '    position: absolute;    ' +
    '    top: 8px; left: 8px;   ' +
    '    max-width: 400px;      ' +
    ' } '
);

请注意在JavaScript中包含多行字符串的笨拙语法.(还有其他方式来设置盒子的样式,这也可以在GreaseMonkey之外使用.我将在下面展示它们中的一些.)

看看CSS样式规则本身,前三行只是说我们的盒子应该有一个白色背景和两个像素宽的红色边框,并且边框和内容之间应该有四个填充像素.所有这些只是让它看起来像一个典型的简单警报框.

以下行说明我们的框应该绝对定位在页面上 - 也就是说,无论页面上还有什么,总是处于固定位置 - 下面的那个框指定我们想要给它的位置:这里,四个像素从页面的左上角.最后一行只是说,无论我们填充多少内容,盒子都不应超过400像素宽.

说到这一点,我们当然也需要添加一些内容.我们可以只使用纯文本:

box.textContent = "Here's some text! This is not HTML, so <3 is not a tag.";

或者我们可以使用HTML:

box.innerHTML = "This <i>is</i> HTML, so &lt;3 needs to be escaped.";

最后,我们需要将该框添加到页面中以使其显示:

document.body.appendChild( box );

你去吧!页面上的一个框.

好的,但我们如何摆脱它呢？嗯,最简单的方法就是让它在点击时消失:

box.addEventListener( 'click', function () {
    box.parentNode.removeChild( box );
}, true );

或者,我们可以为框创建一个单独的关闭按钮,并仅为此设置单击处理程序:

var closeButton = document.createElement( 'div' );
closeButton.className = 'myCloseButton';
closeButton.textContent = 'X';

GM_addStyle( 
    ' .myCloseButton {           ' +
    '    background: #aaa;       ' +
    '    border: 1px solid #777; ' +
    '    padding: 1px;           ' +
    '    margin-left: 8px;       ' +
    '    float: right;           ' +
    '    cursor: pointer;        ' +
    ' } '
);

box.insertBefore( closeButton, box.firstChild );
closeButton.addEventListener( 'click', function () {
    box.parentNode.removeChild( box );
}, true );

在框中的任何其他内容之前插入关闭按钮,并为其指定样式float: right使其浮动到右上角并使文本在其周围流动.该cursor: pointer规则使鼠标光标在按钮上方看起来像一只手,表明它是可点击的.

您也可以以相同的方式在框中(或页面上的其他位置)添加其他按钮.我给了按钮一个类名而不是一个ID,这样,如果你愿意,你可以给你所有的按钮都是同一个类,它们的风格也是一样的.

也可以只是将按钮的HTML代码放入其中box.innerHTML,找到结果元素,例如,box.getElementById()并以这种方式为它们添加点击处理程序.

我说我会提到其他造型元素的方法.一种简单的方法是直接将CSS规则写入其style属性:

box.style.cssText =
    ' background: white;     ' +
    ' border: 2px solid red; ' +
    ' padding: 4px;          ' +
    ' position: absolute;    ' +
    ' top: 8px; left: 8px;   ' +
    ' max-width: 400px;      ' ;

(这样,我们甚至不需要给盒子一个ID.)也可以一次设置(和读取)一个样式:

box.style.background = 'white';
box.style.border = '2px solid red';
box.style.padding = '4px';
box.style.position = 'absolute';
box.style.top = '8px';
box.style.left = '8px';
box.style.maxWidth = '400px';

你会注意到一些名字是不同的; 例如,max-width它maxWidth不是有效的JavaScript属性名称,因此它变为.相同的规则适用于带有连字符的其他CSS属性名称.

不过,我更喜欢,GM_addStyle因为它更灵活.例如,如果您想让框内的所有链接都变红,您可以这样做:

GM_addStyle( 
    ' #myAlertBox a {  ' +
    '    color: red;   ' +
    ' } '
);

顺便说一句,这里有一个巧妙的方法:如果更换position: absolute用position: fixed,那么框不会随着页面滚动-相反,它会留固定到浏览器,即使你向下滚动角落.

另一个提示:如果你还没有Firebug,请安装它.这将使检查页面内容和调试JavaScript的如此容易得多.