我已经使用 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...
最佳答案
是这样的吗?
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
附加到新位置时更新。
关于javascript - 将父项应用于 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17771535/