1

我正在尝试在 Greasemonkey 中编写一个脚本，该脚本将在一个框架中生成链接，但是由于我有限的 Javascript 知识，我真的不知道该怎么做。

主题示例：

<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
<a href="fight.php?action=attacknpcmenu&checkid=1347789191&act_npc_id=764">Attack</a>
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099&act_npc_id=764">Quickattack</a>
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>

所需输出的示例：

<html>
<head>
<frameset border="0" frameborder="no" framespacing="0" cols="*,280" rows="*">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,200">
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="75,*">
<frame scrolling="NO" name="bannerFrame" src="banner.php">
<frame scrolling="auto" name="mainFrame" src="main.php">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<body class="framemainbg" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<table class="areadescription" cellspacing="0" cellpadding="0" border="0">
<br>
<table>
<tbody>
<tr>
<td>
<p class="personlistcaption">Text:</p>
<p class="listusersrow">
<table>
<tbody>
<tr>
<td valign="top">
<td valign="top">
<b>Text </b>
Text -
<a href="fight.php?action=attacknpcmenu&checkid=1347789191&act_npc_id=764">Attack</a>
-
<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
-
<a href="fight.php?action=slapnpc&amp;checkid=8409099&amp;act_npc_id=764&amp;mark=0">Hit</a>
-
<a href="fight.php?action=chasenpc&amp;checkid=8409099&amp;act_npc_id=764&amp;">Chase</a>
<br>
Text
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<table>
<form name="formular">
</body>
</html>
</frame>
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,0">
</frameset>
<frameset border="0" frameborder="NO" framespacing="0" cols="*" rows="*,360">
</frameset>
<noframes><body> Text </body></noframes>
</html>

应生成此链接：

-
<a href="fight.php?action=slapnpc&amp;checkid=8409099&amp;act_npc_id=764&amp;mark=0">Hit</a>
-
<a href="fight.php?action=chasenpc&amp;checkid=8409099&amp;act_npc_id=764&amp;">Chase</a>

'checkid=...' 和 'npc_id=...' 必须与此链接中的值相同：

<a class="fastattack" onclick="this.href += '&yscroll=' + window.pageYOffset;" href="fight.php?action=attacknpc&checkid=8409099act_npc_id=764">Quickattack</a>
4

1 回答 1

4

好的，这实际上只是基本的HTML DOM 操作，这里没有GreaseMonkey特定的内容。

首先，我将假设您要从中复制 URL 参数的链接是唯一带有 的链接class="fastattack"，因为这样很容易找到：

var link = document.getElementsByClassName( 'fastattack' )[0];
if ( link ) {
    // we found the link, do stuff with it...

接下来，我们需要生成第一个新链接：

    var newlink = document.createElement( 'a' );

...使其指向我们想要的 URL：

    newlink.href = link.href.replace( 'action=attacknpc', 'action=slapnpc' );

...并给它我们想要的链接文本：

    newlink.textContent = 'Hit';

接下来，我们将新链接插入到原始链接之后的 DOM 中，如下所示：

    var nextNode = link.nextSibling;
    link.parentNode.insertBefore( newlink, nextNode );

糟糕，我们忘了先插入分隔符！不用担心，我们仍然可以这样做：

    var delim = document.createTextNode( ' - ' );
    link.parentNode.insertBefore( delim, newlink );

现在我们可以对另一个链接做同样的事情：

    var newlink2 = document.createElement( 'a' );
    newlink2.href = link.href.replace( 'action=attacknpc', 'action=chasenpc' );
    newlink2.textContent = 'Chase';
    link.parentNode.insertBefore( delim.cloneNode( true ), nextNode );
    link.parentNode.insertBefore( newlink2, nextNode );

这一次，我记得先插入分隔符。我使用了与delim上面相同的节点，但我复制了它，因为我想插入另一个相同的分隔符，而不是将原始分隔符移动到 DOM 中的新位置。

最后，我们需要关闭if块，就是这样：

}

（免责声明：我没有实际测试过上面的代码。我认为它应该可以工作，但可能有我错过的错误或拼写错误。）

编辑：更改代码以在原始链接之后插入新链接，而不是在父段落的末尾。

附录： 如果您在文档中有多个链接class="fastattack"，并希望将上面的代码应用于每个链接，您可以通过将上面的前两行替换为所有链接的循环来实现，而不仅仅是第一行：

var links = document.getElementsByClassName( 'fastattack' );
for ( var i = 0; i < links.length; i++ ) {
    var link = links[i];
    // now do stuff with link just like above
于 2012-09-16T12:26:55.373 回答