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

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"
    }