Greasemonkey:在表格中添加链接 [英] Greasemonkey: Add a link in a table
问题描述
我想修改如下所示的HTML页面:
I want to modify an HTML page which looks something like this:
<html><head><title>Test</title></head>
<body bgcolor=white link=black alink=black vlink=black text=black>
<table cellpadding=0 ><tr><td class=tiny align=center>
<a href="apple.php">apple</a>
<a href="peach.php">peach</a>
<a href="banana.php">banana</a>
<a href="strawberry.php">strawberry</a><br>
<a href="carrot.php">carrot</a>
<a href="bean.php">bean</a>
<a href="tomato.php">tomato</a>
<a href="cucumber.php">cucumber</a>
</td></tr></table></body></html>
现在，我写了一个Greasemonkey脚本来添加一个附加链接，同时保留所有现有链接:
Now I have written a Greasemonkey script to add an additional link, while keeping all the existing ones:
// ==UserScript==
// @name link_add_test
// @namespace file:///D:/Test/
// @description Test for adding an additional link
// @include file:///D:/Test/test.html
// @version 1
// @grant none
// ==/UserScript==
var searchstring = 'peach';
var anchors = document.getElementsByTagName('a');
for (i=0; i<anchors.length; i++)
{
if (anchors[i].innerHTML == searchstring)
{
var newlink = document.createElement('a');
newlink.href = 'chocolate.php';
newlink.innerHTML = 'chocolate';
newlink.target = '_blank';
anchors[i].parentNode.insertBefore(newlink, anchors[i].nextSibling);
}
}
这几乎可以实现我想要的功能，但不完全是.输出看起来像这样:
This does almost what I want it to do, but not quite. The output looks like so:
apple peachchocolate banana strawberry
carrot bean tomato cucumber
为什么桃子"和巧克力"之间没有空格? 当我禁用GM并通过巧克力链接手动将一行添加到HTML文件时，该行将显示为:
Why is there no space between "peach" and "chocolate"? When I disable GM and manually add a line to the HTML file with the chocolate link, it is displayed like so:
apple peach chocolate banana strawberry
carrot bean tomato cucumber
这是我要实现的目标.我的GM脚本中的错误在哪里?我已经尝试了几个小时，但找不到. :-(
This is what I want to achieve. Where is the mistake in my GM script? I have literally tried for several hours now, but I cannot find it. :-(
推荐答案
与您的期望相反，标记之间的空格实际上在这里有所不同:
Contrary to your expectation, the whitespace between the tags is actually making a difference here:
<a href="peach.php">peach</a>
<a href="banana.php">banana</a>
与
<a href="peach.php">peach</a><a href="banana.php">banana</a>
第一个元素在a元素之间具有空格，第二个元素之间没有空格.
The first will have whitespace between the a-elements, the second will not.
当您在HTML中手动添加一行时，毫无疑问，您使用每行一个a元素对其进行格式化，因此您将生成第一个版本.但是，当您使用Greasemonkey插入新节点时，您将生成第二个版本.如果需要空格，则还必须插入空格:
When you manually add a line into the HTML, no doubt you are formatting it with one a-element per line, so you are producing the first version. But, when you insert a new node with Greasemonkey, you are producing the second version. If you want whitespace, you have to insert it as well:
var searchstring = 'peach';
var anchors = document.getElementsByTagName('a');
for (i=0; i<anchors.length; i++)
{
if (anchors[i].innerHTML == searchstring)
{
var foo = document.createTextNode(' ');
var newlink = document.createElement('a');
newlink.href = 'chocolate.php';
newlink.innerHTML = 'chocolate';
newlink.target = '_blank';
anchors[i].parentNode.insertBefore(newlink, anchors[i].nextSibling);
anchors[i].parentNode.insertBefore(foo, anchors[i].nextSibling);
}
}
这篇关于Greasemonkey:在表格中添加链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
