【问题标题】:Greasemonkey code to put Youtube iFrames in spoiler将 Youtube iFrame 放入扰流板的 Greasemonkey 代码
【发布时间】:2013-11-13 04:47:34
【问题描述】:

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

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

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

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

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

【问题讨论】:

    标签: javascript iframe youtube embed greasemonkey


    【解决方案1】:

    使用jQuerythe waitForKeyElements utility 的强大功能并不难。

    1. 使用waitForKeyElements 查找youtube.com 在其src 中的iframe。 waitForKeyElements 支持 AJAX。
    2. 在将 iframe 标记为已找到(在本例中使用 gmSpoiledAlready 类)后,将找到的每个 &lt;iframe&gt; 替换为 &lt;button&gt;
      该按钮还存储 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);
    }
    

    【讨论】:

      猜你喜欢
      • 2013-03-27
      • 2017-11-26
      • 2020-03-15
      • 2013-09-19
      • 2019-01-03
      • 1970-01-01
      • 2016-05-12
      • 1970-01-01
      • 2015-07-10
      相关资源
      最近更新 更多