将 Youtube iFrame 放入扰流板的 Greasemonkey 代码

Question

在我加入的一个论坛上，我们有大量线程，最终嵌入了很多 Youtube 视频，而且很多人在向下滚动页面时发现这很烦人。所以，我想用 Greasemonkey 给每一个都包一个剧透，这样每个视频就可以单独打开和观看了。

这里是以一个视频为例的代码；

<iframe src="http://www.youtube.com/embed/_IATqru7Sh8?wmode=opaque" allowfullscreen="" frameborder="0" height="300" width="500"></iframe>

我想在它周围添加一些代码，以便每个视频都包含在一个 Javascript 剧透中，该剧透有一个可供单击以显示视频的按钮。

我已经设法用 Greasemonkey 替换了简单的文本，但这对我来说有点复杂。任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

使用jQuery 和the waitForKeyElements utility 的强大功能并不难。

1. 使用waitForKeyElements 查找youtube.com 在其src 中的iframe。 waitForKeyElements 支持 AJAX。
2. 在将 iframe 标记为已找到（在本例中使用 gmSpoiledAlready 类）后，将找到的每个 <iframe> 替换为 <button>。
   该按钮还存储 iframe 源代码的副本，以便可以重新创建 iframe。我们不只是隐藏 iframe，因为这样它仍然可以在后台加载内容——这会减慢页面速度。
3. 使用 jQuery 的.on() 激活所有按钮。单击后，每个按钮都会将其自身替换为其原始 iframe 源。

这是一个完整的 Greasemonkey 脚本：

// ==UserScript==
// @name     _Hide iframed youtube videos
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements ("iframe[src*='youtube.com']", hideYoutubeVideo);

function hideYoutubeVideo (jNode) {
    if ( ! jNode.hasClass ("gmSpoiledAlready") ) {
        jNode.addClass ("gmSpoiledAlready");

        var srcCode     = jNode[0].outerHTML;

        jNode.after ('<button class="gmYT_hide">Show YouTube video</button>');
        jNode.next ('button').data ("frmCode", srcCode);
        jNode.remove ();
    }
}

//--- Activate any and all of the spoiler buttons
$(document.body).on ("click", "button.gmYT_hide", restoreYoutubeVideo)

function restoreYoutubeVideo (evnt) {
    var jThis   = $(evnt.target);
    var frmCode = jThis.data ("frmCode");

    jThis.replaceWith (frmCode);
}