如何将逗号分隔的 URL 列表拆分为单独的 iFrame？ (jQuery)答案

【问题标题】：How do I split a comma-separated list of URLs into individual iFrames? (jQuery)如何将逗号分隔的 URL 列表拆分为单独的 iFrame？ (jQuery)
【发布时间】：2015-12-31 22:28:25
【问题描述】：

我试图弄清楚如何在“src”属性中拆分以逗号分隔的 URL 列表，并将每个 URL 放在自己的 iFrame 中。我正在使用的应用程序不允许多个 iFrame 元素，所以我想知道是否有一种方法可以通过 JavaScript 或 jQuery 来完成此操作。

当前语法：

<iframe name="target" src="https://www.youtube.com/embed/111,https://www.youtube.com/embed/222" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>

我想要达到的目标：

<iframe name="target" src="https://www.youtube.com/embed/111" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>
<iframe name="target" src="https://www.youtube.com/embed/222" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>

【问题讨论】：

你试过了吗？
提问前记得在谷歌或SO上搜索解决方案，有些问题很容易找到解决方案，比如这个搜索结果：stackoverflow.com/…

标签： javascript jquery iframe

【解决方案1】：

// Iframe element with a placeholder for src property.
var urlTemplate = '<iframe name="target" src="{0}" width="100%" height="100" frameborder="0" scrolling="auto"></iframe>'

// Get both youtube sources and add to array. 
var sources = $('iframe').attr('src').split(',')

// Loop through the links in sources and append a video iframe to the output div.
for (var i = 0; i < sources.length; i++) {
    $('.output').append(urlTemplate.replace('{0}', sources[i]));
}

您还需要隐藏原始元素，因为它没有有效的 src。

https://jsfiddle.net/xotjjk9e/1/

【讨论】：