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

OK、これは本当に基本的な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"、それぞれに上記のコードを適用したい場合は、上記の最初の 2 行を、最初のリンクだけではなく、すべてのリンクのループに置き換えることで実行できます。

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 に答える