javascript - Greasemonkey 代码将 Youtube iFrame 放入剧透中

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 的 iframe在他们的 src 。 waitForKeyElements 支持 AJAX。
2. 替换找到的每个 <iframe>与 <button> ，将 iframe 标记为已找到(在本例中使用 gmSpoiledAlready 类)。
   该按钮还存储 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);
}