javascript - 将父项应用于 iframe

Question

我已经使用 FluidVids.js 修复了视频的高宽比.现在我想用 parent 包装我的 iframe。我知道 parent 通过手动将其放入 HTML 文件来工作。但是我正在处理的模板需要自动执行此操作。

所以我要的是一个(纯)JavaScript，用于用我称为 fwparent 的 div 类包装我的 iframe。 HTML 看起来像这样:

<div class="post">
...
<iframe src="a-nice-video" allowFullscreen></iframe>
...
</div>

FluidVids 会覆盖 iframe 上的标准尺寸。但是我的 div 类 post 有一些填充，我需要用 fwparent 类覆盖!

所以结果应该是这样的:

<div class="post">
...
<div class="fwparent"><iframe src="a-nice-video" allowFullscreen></iframe></div>
...
</div>

请记住，纯 JavaScript。没有对 jQuery 或类似东西的额外 HTTP 请求...

我对 JavaScript 没有任何经验。所以，请保持友善 ;)

我有类似的东西适用于图像:

function imgWrap(parent) {
if (!parent || parent.nodeType !== 1) {
    return false;
}
else {
    var images = parent.getElementsByTagName('img'),
        newDiv = document.createElement('div'),
        tmp;
    newDiv.className = 'parent';
    for (var i = 0, len = images.length; i < len; i++) {
        tmp = newDiv.cloneNode(true);
        parent.insertBefore(tmp, images[i])
        tmp.appendChild(images[i]);
    }
}
}

imgWrap(document.querySelector('div.post'));

jQuery 会做这样的事情:

$('iframe').wrap('<div class="fwparent" />');

但我希望它是纯 JavaScript。并应用于所有 iframe...

Answer 1

是这样的吗？

var div = document.getElementById('wrapper').appendChild(document.createElement('div'));
div.className = 'fwparent';
div.appendChild(document.getElementById('iframe'));

编辑

要包装多个 iframe，您需要使用循环:

var frms = document.getElementsByTagName('iframe'),
    post = document.getElementById('post'),
    div, n;
for (n = 0; n < frms.length; n++) {
    div = post.appendChild(document.createElement('div'));
    div.className = 'fwparent';
    div.appendChild(frms[0]); // *
}

* = 看起来我们需要 0 而不是 n，这是一个由 getElementsByTagName() 创建的实时节点列表> 在将 iframe 附加到新位置时更新。

A live demo at jsFiddle .