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

Question

我正在尝试为我的用户编写一个插入式 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>

Answer 1

首先，您要转义2个不需要转义的引号（用于连接），另外，循环错误，应该如下：

<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>

Answer 2

我建议不要使用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);

外部JS Fiddle demo。

参考资料：

• Array.prototype.forEach()。
• Array.prototype.map()。
• document.createDocumentFragment()。
• document.createElement()。
• HTMLIFrameElement。
• Node.appendChild。