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

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 为 smiley-box 的 <div>。

如果有人能帮我做这件事，我会很高兴。

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 个致命罪过：

1. 它避免了"cut and paste (and cry)" coding。
2. 它以强大的 web 2.0 方式使用事件处理程序。 （切勿使用onclick。）
3. 它不会丢弃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);

这是我目前的解决方案，谢谢