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

Hide Text and Add a Button to make it show up

本文关键字：显示 按钮 文本 添加 隐藏      更新时间：2023-09-26

我正在尝试更改脚本，我这样做更多是为了学习如何做，而不是因为我需要它。

一旦你点击页面上的链接，你就会得到一个javascript：nameoffunction('somekey'(;所以它会在你的屏幕上弹出。在网站右侧的空白部分弹出的脚本打开，至少是意图。

所以我要做的是用一个按钮"显示它"隐藏打开对象的描述文本，这样文本只会在单击时出现。

我尝试使用侦听器加载，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 的元素。我右键单击时只能使用检查元素看到它

几个问题：

  1. Greasemonkey 在 iframe 上运行，就好像它们是单独的页面一样。 在为您关心 iframe 内容的页面编码时，您必须考虑(或利用(这一点。

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

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

    如果脚本适用于多个浏览器，请在问题中说明并适当标记。 这被标记为 greasemonkey - 这意味着它适用于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 () );
相关文章：