-1

我想使用 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]与图像 URL 相同。
我希望能够随着时间的推移添加许多笑脸——改变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);

如您所见，我需要将这个新笑脸添加到<div>idsmiley-box中。

如果有人可以帮助我做到这一点，我会很高兴。

4

4 回答 4

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

于 2013-11-05T07:28:39.993 回答
0

不确定这是否是油钱方式，但您也可以直接更新笑脸框的 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 的解决方案是一个不错的解决方案。

于 2013-11-05T07:49:38.547 回答
0

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

  1. 它避免了“剪切和粘贴（和哭泣）”编码。
  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;
}
于 2013-11-05T08:38:50.117 回答
-1 
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);

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

于 2013-11-05T07:38:08.173 回答