使用 jquery 更改 iframe 属性

Change iframe attribute with jquery

本文关键字：属性 iframe 更改 jquery 使用      更新时间：2023-09-26

我有这样的东西：

        <iframe id="frame" width="200" height="150" 
    src="http://www.youtube.com/embed/GiZGEFBGgKU?rel=0&
amp&iv_load_policy=3;autoplay=1" frameborder="0" allowfullscreen></iframe>

我想使用 jquery 更改宽度和高度，我尝试：

$("#frame").setAttribute("width", "50");
$("iframe").setAttribute("width", "31");

他们都不起作用

正如 Sarfraz 已经指出的那样，为 jquery 选择器对象设置属性的正确方法是使用 attr("attrName", "attrVal") 。 setAttribute不起作用的原因值得解释，因为我不止一次地反对这一点：

当你使用 jquery 的选择器语法时，它会返回一个对象——在 jquery 中定义——它本质上是选择器匹配的所有元素的列表。无论它匹配一个元素（id 选择器应该始终如此）还是多个元素，返回的对象都是元素列表，而不是单个 DOM 对象（例如单个元素）。 setAttribute是实际HTMLElement对象的方法。

这就是为什么

$("#frame")[0].setAttribute("width", "200");

有效，但是

$("#frame").setAttribute("width", "200");

不。 jquery 元素没有该方法，即使其列表中的HTMLElement对象有

。

如果你想（无论出于何种原因）使用本机HTMLElement方法（或选择器返回的元素通用的方法，如输入等），你可以使用 jquery 的 each() 方法，如下所示：

 // Set all iframes to width of 250
 $("iframe").each(
     function(index, elem) {
         elem.setAttribute("width","250");
     }
 );

each()方法的回调可以传递两个可选参数，第一个是选择器列表中元素的索引，第二个是实际的 DOM 元素，您可以对其调用本机 DOM 方法。

就像我说的，我非常沮丧地试图弄清楚如何多次将 jquery 的选择器结果与本机方法一起使用，所以我希望这不仅有助于澄清为什么setAttribute()不起作用，而且有助于清除一般的本机方法，以及如何在找不到 jquery 等效项时实际让它们工作。

怎么样：

$('#frame').width(x)

或 

$('#frame').attr("width","50");

1） 使用 attr ：

$("#frame").attr("width", "31");

2） 使用 DOM 对象：

$("#frame")[0].setAttribute("width", "50");

$(document).ready( function() {
var ysr = $('iframe').attr('src');
var nysr = ysr + "HD=1;rel=0;showinfo=0";
$('iframe').attr('src', nysr);});

编辑：看到你确实有id。 你能看看代码是否真的在运行吗？就像它被触发了吗？另外，请尝试将allowfullscreen更改为allowfullscreen="true"

相关文章：