Question

我想使用Greasemonkey向页面添加新的锚链接。具体来说，我想添加自定义表情，这样我就不必每次都找到笑脸图片并将链接复制并粘贴到[img]标签中。

我要添加的代码是

<a href="#" onclick="insert_text(':D', true); return false;">
    <img src="./images/smilies/icon_e_biggrin.gif" alt=":D" title="Very Happy" height="17" width="15">
</a>

但我想将img src位置和onclick更改为

insert_text('[img]imagesourcelocation[/img]' ,true) return false;

[img]来源与图片网址相同我希望能够随着时间的推移添加许多表情符号 - 更改alt和title属性也会很棒，但我主要需要其他两个。

我该怎么办？
到目前为止我只有这个：

var para=document.createElement("a");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("smiley-box");
element.appendChild(para);

正如您所看到的，我需要将这个新的笑脸添加到ID为<div>的{{1}}。

如果有人能帮助我这样做，我会很高兴。

Answer 1

您可以通过访问DOM元素属性的属性来设置它们的属性，例如：设置href：

para.href = "#";

设置onclick有点不同 - 不是给它一串Javascript，而是给它一个函数：

para.onclick = function() {
    insert_text('[img]imagesourcelocation[/img]' ,true);
    return false;
}

要在链接中实现图像，只需创建一个img元素而不是文本节点，设置上面的属性，并将其添加到链接：

// create the img and set it's src
var node=document.createElement("img");
node.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Smiley.png/50px-Smiley.png"

// add the img to the anchor
para.appendChild(node);

这里的工作示例：http://jsfiddle.net/d2gGR/

参考文献：

http://www.w3schools.com/jsref/dom_obj_anchor.asp
http://www.w3schools.com/jsref/dom_obj_image.asp
http://www.w3schools.com/jsref/dom_obj_event.asp

Answer 2

不确定这是否是油脂方式，但你也可以直接更新笑脸盒的innerHTML

function add(url, alt, title)
{
    var box=document.getElementById("smiley-box");
    box.innerHTML += "<a href=\"#\" onclick=\"insert_text('[img]" + url + 
                     "[/img]', true); return false;\"><img src=\"" + url + 
                     "\" alt=\"" + alt + "\" title=\"" + title + "\" height=\"17\" width=\"15\"></a>";
}

然后您可以像这样添加表情符号（链接，替代文字和标题文字）：

add("http://bit.ly/1a4xaTX",":D","Big grin");
add("http://bit.ly/HDGdlw",":(","Sad");
add("http://bit.ly/175LywW",":O","Surprised");

jingtao的解决方案虽然很好。

Answer 3

这是一个完整的脚本，它使用jQuery的强大功能添加自定义表情符号。请注意，它避免了3个致命的脚本罪：

避免"cut and paste (and cry)" coding。
它使用强大的Web 2.0方式的事件处理程序。（切勿使用onclick。）
它不会废弃现有元素的innerHTML。

此外，如果需要，使用waitForKeyElements()，此代码很容易识别AJAX。

// ==UserScript==
// @name     _Add custom smilies
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
$("#smiley-box").append ('<p>Custom smileys.</p>');

addNewSmiley ("http://sguwars.com/forum/images/smilies/icon_cool.gif");

function addNewSmiley (imageURL) {
    $("#smiley-box").append (
        '<a href="#" class="gmCustomSmilies">'
        + '<img src="' + imageURL + '"></a>'
    );
}

//-- Activate click handlers for any and all of our custom smilies
$(document.body).on ("click", "a.gmCustomSmilies", insertSmilie);

function insertSmilie (evnt) {
    var jThis   = $(evnt.target);
    var imgURL  = jThis.find ("img").attr ("src");

    unsafeWindow.insert_text ('[img]' + imgURL + '[/img]', true);
    return false;
}

Answer 4

var para=document.createElement("p");
var node=document.createTextNode("custom smileys.");
para.appendChild(node);
links = document.createElement('a');
links.setAttribute('href','#');
links.setAttribute('onclick','insert_text(\'[img]http://sguwars.com/forum/images/smilies/icon_cool.gif[/img]\', true); return false;');
links.innerHTML ='<a href="we.html"><img src="http://sguwars.com/forum/images/smilies/icon_cool.gif" /></a>';
var element=document.getElementById("smiley-box");

element.appendChild(para);
element.appendChild(links);

到目前为止，这是我的解决方案

如何使用onclick添加自定义锚链接？

4 个答案: