1

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

以下是用于一个视频的代码作为示例；

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

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

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

4

1 回答 1

1

使用jQuery的强大功能和waitForKeyElements 实用程序并不难。

  1. 用于waitForKeyElements查找youtube.com其src. waitForKeyElements 支持 AJAX。
  2. 在将 iframe 标记为已找到（在本例中使用类）之后，将找到的每个替换<iframe>为,。 该按钮还存储 iframe 源代码的副本，以便可以重新创建 iframe。我们不只是隐藏 iframe，因为这样它仍然可以在后台加载东西——这会减慢页面速度。<button>gmSpoiledAlready
  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);
}
于 2013-11-02T00:30:41.463 回答