Question

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

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

所以我要做的是使用“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...

当我在页面上打开源代码时，无法找到使用id divlegenda插入的元素。当我右键单击

时，我只能用inspect元素看到它

Answer 1

几个问题：

Greasemonkey在iframe上运行，好像它们是单独的页面一样。在编码您关心iframed内容的网页时，您必须考虑（或利用）这一点。
尽量避免使用innerHTML。它会破坏事物（事件等），速度很慢，如果你试图编写可重用的代码，它在浏览器中的表现会有所不同。
document.body.innerHTML +=特别糟糕。
这是尝试获得跨浏览器兼容性的错误方法，但它无法正常工作。此外，对于许多版本的Chrome，contentWindow已经过时。

如果脚本适用于多个浏览器，请在问题和标签中正确说明。这标记为greasemonkey - 这意味着它适用于Firefox或Tampermonkey（Chrome扩展程序）。
用纯Greasemonkey风格编码是最简单也是最好的，除非你有充分的理由不这样做。
升级到jQuery它会让事情变得如此简单。
不要使用属性来设置样式（width="498"，height="2500"等）。使用CSS。
当你打开页面源（ Ctrl U ）时，它只显示静态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 () );

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

1 个答案: