隐藏文本并添加一个按钮以使其显示

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 在 iframe 上运行，就好像它们是单独的页面一样。在为您关心 iframe 内容的页面进行编码时，您必须考虑（或利用）这一点。

2. 尽可能避免使用innerHTML。它会破坏事物（事件等），速度很慢，而且如果您尝试编写可重用的代码，它在不同浏览器中的行为会有所不同。
   document.body.innerHTML += 尤其糟糕。

3. 这是尝试获得跨浏览器兼容性的错误方法，它不会起作用。此外，对于许多版本的 Chrome，contentWindow 已过时。

   如果脚本适用于多个浏览器，请在问题中说明并适当标记。这被标记为 greasemonkey - 这意味着它适用于 Firefox 或 Tampermonkey（Chrome 扩展程序）。
   除非您有充分的理由不这样做，否则以纯 Greasemonkey 风格编写代码是最简单和最好的。

4. 升级到jQuery，这会让事情变得容易得多。

5. 不要使用属性来设置样式（width="498"、height="2500" 等）。使用 CSS。

6. 当您打开页面源 (CtrlU) 时，它只显示静态 HTML，您不会看到页面、Greasemonkey、或 Firebug 已更改。为此请使用检查工具。
   但是，如果您保存页面（Ctrl S)，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 () );