Question

简而言之，问题是：我们有一个新闻网站，其中包含该网站的移动版本。对于显示所调用文章的页面，偶尔会有嵌入视频（来自youtube）显示在iframe中。它们的默认大小通常类似于580px，在移动浏览器上显然太大了。

我想使用javascript搜索内容，并在找到任何iframe时调整其大小。也就是说，我不知道在移动设备上使用JavaScript是否是最好的选择，其次，我不知道如何搜索某种元素类型的所有实例。 iframe没有附带名称或ID ......

我简单地考虑使用PHP来搜索<iframe，但在这种情况下，似乎php会不必要地草率并且可能很容易被破坏。

有没有人就如何处理这个问题提出意见/建议？

Answer 1

使用jQuery可以很容易地根据标签选择元素。

jQuery的：

$('iframe').width(300);

使用普通DOM也相当容易。

var iframes = document.getElementsByTagName('iframe');
    for (var i=0; i<iframes.length; i++)
    {
      iframes[i].style.width = "300px"
    }

Answer 2

使用jQuery，调整文档中所有iframe的大小就像输入一样简单，例如，

$('iframe').css('width', '200px');

当然，jQuery在大小方面有一个开销，但是缩小和压缩，它的占用空间不是很大，即使对于移动应用程序也是如此。

Answer 3

这对我有用：

只需在顶部包含您想要的宽度边距：

//Just Change this
var margin = "20";
//////////////////////////////////////////////////////
var iframes = document.getElementsByTagName('iframe');
var w = window.innerWidth || document.body.clientWidth;
var newwidth = w - ( 2 * margin );

for (var i=0; i<iframes.length; i++)
{
 var currentheight = iframes[i].height;
 var currentwidth  = iframes[i].width;  
 var newheight = (newwidth / currentwidth) * currentheight;

  iframes[i].style.width = newwidth+"px";
  iframes[i].style.height = newheight+"px";
}

将所有iFrame放入div中并调整其大小以适应移动设备

3 个答案: