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的强大力量并不难。

使用waitForKeyElements在youtube.com中找到src的iframe。 waitForKeyElements是AJAX感知的。
在将iframe标记为已找到之后，将每个找到的<iframe>替换为<button>（在这种情况下使用gmSpoiledAlready类）。
该按钮还存储iframe源代码的副本，以便可以重新创建iframe。我们不只是隐藏iframe，因为它仍然可以在后台加载东西 - 这会减慢页面的速度。
使用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);
}

Greasemonkey代码将Youtube iFrames放入剧透

1 个答案: