Question

我正在尝试在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>

Answer 1

好的，这真的只是基本HTML DOM manipulation，没有GreaseMonkey - 具体在这里。

首先，我将假设您要复制网址参数的链接是唯一一个class="fastattack"的链接，因为that makes finding it easy：

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

接下来，我们需要generate the first new link：

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

...制作point to the URL we want：

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

...并给它the link text we want：

    newlink.textContent = 'Hit';

接下来，我们insert the new link into the DOM就在原始链接之后，如下所示：

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

哎呀，我们忘了先插入the delimiter！不用担心，我们仍然可以这样做：

    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节点，但我made a copy of it因为我想插入另一个相同的分隔符，而不是将原始分隔符移动到DOM中的新位置。 / p>

最后，我们需要关闭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

使用greasemonkey脚本生成链接

1 个答案: