1

私はスクリプトを変更しようとしています。必要なためよりも、スクリプトを変更する方法を学ぶためにこれを行っています。

ページ上のリンクをクリックすると、javascript：nameoffunction（'somekey'）;が表示されます。そのため、画面にポップアップ表示されます。Webサイトの右側の空白部分にポップアップ表示されるスクリプトを開くことは、少なくとも意図したことです。

だから私がやろうとしているのは、開いたオブジェクトの説明テキストを「SHOW it」ボタンで非表示にすることです。そのため、テキストはクリックされたときにのみ表示されます。

リスナーonload、DOMNodeInsertedIntoDocumentを使用してみましたが、何も機能していません。DOMのボタンを入力しようとした要素で未定義のエラーが発生しました

document.body.innerHTML += '<div id="divlegenda" align="left">';

if (typeof contentWindow != 'undefined') {
    unsafeWindow = contentWindow; // google chrome
} else if (typeof unsafeWindow != 'undefined') {
    // firefox
} else {
    unsafeWindow = window; // opera + safari?
}

//unsafeWindow
unsafeWindow.abredown = function abredown(download) {
    document.getElementById('divlegenda').innerHTML = '<iframe src="info.php?d='+download+'" width="498" height="2500" frameborder="0" id="framelegenda"></iframe>';

}

description = document.getElementById('divlegenda').getElementsByClassName('comentuser')[0];
description.style.display='none';

button = document.createElement('button');
button.id = 'show';
button.appendChild(document.createTextNode('<< Show >>'));
button.onclick = function () { click(); };
document.getElementsByClassName('titulofilme')[2].appendChild(button);


function click() {
    description.style.display='inherit';
    button.style.display='none';
}

挿入しようとしているHTML部分

    <td class="titulofilme">
<div align="left">Comentário:</div>
</td>
</tr>
<tr>
<td class="comentuser">
<div id="descricao" align="left">
...text here...

ページでソースコードを開くと、iddivlegendaで挿入された要素が見つかりません。右クリックしたときにのみ検査要素で見ることができます

4

1 に答える 1

1

いくつかの問題：

  1. Greasemonkeyは、別々のページであるかのようにiframe上で実行されます。iframedコンテンツを気にするページをコーディングするときは、これを考慮する（または悪用する）必要があります。

  2. innerHTMLできるだけ使用しないでください。それは物事（イベントなど）を壊し、遅く、再利用可能なコードを書き込もうとすると、ブラウザー間で動作が異なります。
    document.body.innerHTML +=特に悪いです。

  3. これは、ブラウザー間の互換性を取得しようとする間違った方法であり、機能しません。また、contentWindowChromeの多くのバージョンで廃止されました。

    スクリプトが複数のブラウザ用である場合は、質問でそのように言い、適切にタグ付けしてください。これはとタグ付けされています。これは、FirefoxまたはTampermonkey（Chrome拡張機能）用であることを意味します。
    正当な理由がない限り、純粋なGreasemonkeyスタイルでコーディングするのが最も簡単で最良です。

  4. jQueryにステップアップすると、作業が非常に簡単になります。

  5. 属性を使用してスタイルを設定しないでください（width="498"、height="2500"など）。CSSを使用します。

  6. ページソース（CtrlU）を開くと、静的HTMLのみが表示され、ページ、Greasemonkey、またはFirebugが変更されたものは表示されません。そのための検査ツールを使用してください。
    ただし、ページ（ ）を保存CtrlSすると、Firefoxはさまざまなスクリプトによって行われた変更を含めて現在のDOMをディスクに保存します。


したがって、これ以上の説明はありませんが、質問で指定されたことを実行するGreasemonkeyスクリプトを次に示します。

// ==UserScript==
// @name        _Legendas.tv, show details in an iframe
// @namespace   _pc
// @include     http://legendas.tv/*
// @include     https://legendas.tv/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

if (window.top == window.self) {
    /*--- This part executes only in the master window (Not in iframes).
        It's not necessary in this case, just showing how...
    */
    //--- jQuery uses proper DOM methods to add nodes
    $("body").append ('<div id="divlegenda"></div>');

    unsafeWindow.abredown   = function abredown (download) {
        var legendaryDiv    = document.getElementById ('divlegenda');
        if (legendaryDiv) {
            //--- innerHTML is okay-ish here; replace later.
            legendaryDiv.innerHTML  = '<iframe src="info.php?d='
                                    + download + '"></iframe>';
        }
        window.scrollTo (0,0);
    }
}

/*--- This part executes both in frames and out. But the code (so far)
    is harmless if the targeted nodes are not present.
*/

//--- Hide comments but add a button to show them...
$(".comentuser").hide ().each ( function () {
    $(this).before ('<button class="gmShowHide"><< Show >></button>');
} );

//--- Activate the button(s).
$("button.gmShowHide").click ( function () {
    var jThis       = $(this);
    var Comments    = jThis.next ();
    Comments.toggle (); //-- Show or hide as necessary

    if (/Show/.test (jThis.text () ) )
        jThis.text ('>> Hide <<');
    else
        jThis.text ('<< Show >>');
} );


GM_addStyle ( (<><![CDATA[
    #divlegenda {
        margin:             0;
        padding:            0;
        position:           fixed;
        top:                0;
        right:              0;
        height:             100%
    }
    #divlegenda iframe {
        margin:             0;
        padding:            0;
        width:              598px;
        height:             100%
        border:             none;
    }
]]></>).toString () );
于 2012-05-16T02:13:22.823 に答える