如何将以逗号分隔的URL列表拆分为单个iFrame？ （jQuery的）

Question

我试图弄清楚如何在＆＃34; src＆＃34;中分割以逗号分隔的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>

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