尝试编写Javascript循环通过YouTube iFrame嵌入

Trying to Write Javascript to Loop Through YouTube iFrame Embeds

本文关键字：YouTube iFrame 嵌入 循环 Javascript      更新时间：2023-09-26

我正在尝试和失败写一个drop-in YouTube嵌入播放器为我的用户，这样他们只需要改变一行改变任何和所有的YouTube播放器在一个页面上。我把这个放到我的页面，但是什么也没发生。

        <script>
        // Replace line below with video id(s), e.g. ["dQw4w9WgXcQ"] or ["dQw4w9WgXcQ","b1WWpKEPdT4"]
        var ids = ["dQw4w9WgXcQ","b1WWpKEPdT4"];
        //
        //
        var idsAmount = ids.length;
        for (var i in idsAmount) {
            document.write("<iframe src='"https://www.youtube.com/embed/" + ids[i] + "?modestbranding=1&amp;rel=0&amp;autoplay=1'" /> <br />");
        };
        </script>

控制台中没有错误。知道为什么什么都没发生吗?

编辑:这是我最终的工作代码:

        <script>
            // Replace line below with video id(s), e.g. ["dQw4w9WgXcQ"] or ["dQw4w9WgXcQ","b1WWpKEPdT4"]
            var ids = ["dQw4w9WgXcQ","b1WWpKEPdT4"];
            //
            if (ids.length == 1) {
                document.write("<iframe width='"640px'" height='"360px'" src='"https://www.youtube.com/embed/" + ids + "?modestbranding=1&rel=0&autoplay=1'" frameborder='"0'" allowfullscreen></iframe>");
                document.write("<br />");
            }
            else {
                for (var i = 0; i < ids.length; i++) {
                    document.write("<iframe width='"640px'" height='"360px'" src='"https://www.youtube.com/embed/" + ids[i] + "?modestbranding=1&rel=0'" frameborder='"0'" allowfullscreen></iframe>");
                    document.write("<br /> <br />");
                };
            };
        </script>

首先，您正在转义两个不需要转义的引号(用于连接)，而且，循环是错误的，应该如下所示:

<script>
    // Replace line below with video id(s), e.g. ["dQw4w9WgXcQ"] or ["dQw4w9WgXcQ","b1WWpKEPdT4"]
    var ids = ["dQw4w9WgXcQ","b1WWpKEPdT4"];
    //
    //
    for (var i = 0; i < ids.length; i++) {
        document.write("<iframe src='"https://www.youtube.com/embed/" + ids[i] + "?modestbranding=1&amp;rel=0&amp;autoplay=1'" /> <br />");
    };
</script>

而不是使用document.write()和for...循环，我建议简单地迭代数组本身，使用Array.prototype.map()，创建一个HTML节点数组，它本身被迭代到将这些节点追加到文档片段，这反过来可以追加到指定的DOM节点:

// Array of video ids:
var ids = ["dQw4w9WgXcQ", "b1WWpKEPdT4"],
  // creating an <iframe> element:
  iframeElement = document.createElement('iframe'),
  // creating a document fragment:
  fragment = document.createDocumentFragment(),
  // an unitialised (undefined) variable for later use:
  clone,
  // iterating over the array of ids, creating a new
  // array using Array.prototype.map():
  html = ids.map(function(currentID) {
    // in the anonymous function the first
    // argument (here: 'currentID') is the
    // current array-element of the array
    // over which we're iterating.
    // cloning the <iframe>:
    var clone = iframeElement.cloneNode();
    // setting the src property of the cloned
    // <iframe>:
    clone.src = 'https://www.youtube.com/embed/' + currentID + '?modestbranding=1&rel=0&autoplay=0';
    // Note that 'autoplay' has been set to
    // to '0' on principle.
    // returning the modified clone to the array
    // we're creating:
    return clone;
    // iterating over the array returned from
    // Array.prototype.map() and appending each
    // array-element to the document fragment:
  }).forEach(function(iframe) {
    fragment.appendChild(iframe);
  });
// appending the document fragment to the body element:
document.body.appendChild(fragment);

External JS Fiddle demo.

引用:

  • Array.prototype.forEach() .
  • Array.prototype.map() .
  • document.createDocumentFragment() .
  • document.createElement() .
  • HTMLIFrameElement .
  • Node.appendChild .
相关文章：