Question

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

所以我要求的是一个（纯）JavaScript，用于将我的iframe包装成一个div类，我调用fwparent。 HTML看起来像这样：

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

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

所以结果应该是这样的：

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

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

我没有使用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()创建的实时节点列表在将iframes附加到新位置时会更新

A live demo at jsFiddle

将父级应用于iframe

1 个答案: