1

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

所以我要的是一个（纯）JavaScript，用于用我调用的 div 类包装我的 iframe fwparent。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...

4

1 回答 1

2

像这样的东西？

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()iframes

jsFiddle 的现场演示。

于 2013-07-21T10:59:17.710 回答