javascript - 获取 div 中的所有 iFrame 并调整它们的大小以适应移动设备

Question

简而言之，问题是这样的:我们有一个新闻网站，它有一个移动版本的网站。对于显示任何文章名称的页面，偶尔会在 iframe 中显示嵌入的视频(来自 youtube)。它们的默认大小通常类似于 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"
    }