隱藏文字並添加一個按鈕使其顯示

Question

我正在嘗試更改腳本，我正在更多地學習如何操作，因爲我需要它。一旦你點擊頁面上的鏈接，你就會得到一個javascript：nameoffunction（'somekey'）; 因此它彈出在你的屏幕上。 The Script打開，在網站的空白部分彈出，在右側，至少是打算。

所以我想要做的是用一個按鈕「顯示」來隱藏打開的對象的描述文本，所以文本只會在點擊時出現。

我試過使用監聽器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... 

當我打開網頁源代碼，元素插入與id divlegenda無法找到。我只能看到它與檢查元素，當我點擊右鍵

Answer 1

幾個問題：

1. Greasemonkey的I幀上運行，好像它們是單獨的頁面。編碼您關心iframe內容的網頁時，您必須對此進行說明（或利用）。

2. 儘可能避免使用innerHTML。它會破壞事件（事件等），速度很慢，如果你正在嘗試編寫可重用代碼，它將在不同瀏覽器中表現不同。
   document.body.innerHTML +=尤其糟糕。

3. 這是嘗試獲得跨瀏覽器兼容性的錯誤方法，它不起作用。此外，許多版本的Chrome已經過時了contentWindow。

   如果該腳本適用於多個瀏覽器，請在相應的問題和標記中說明。這是標記爲greasemonkey - 這意味着它是Firefox或Tampermonkey（Chrome擴展）。
   這是最簡單和最好的代碼在純Greasemonkey風格，除非你有一個不錯的理由不要。

4. 步驟達到jQuery它會讓事情變得更容易。

5. 不要使用屬性來設置樣式（width="498"，height="2500"等）。使用CSS。

6. 當您打開頁面的源代碼（按Ctrl ü），它只顯示靜態的HTML，你將看不到的東西，網頁，Greasemonkey的，或螢火蟲發生了變化。爲此使用檢查工具。
   然而，如果你保存頁面（按Ctrl小號），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());