Javascript 使用 jquery 更改 iframe 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10083399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change iframe attribute with jquery
提问by Ben
I have something like so:
我有这样的事情：
<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>
And I want to change the width and height using jquery I try:
我想使用 jquery 更改宽度和高度，我尝试：
$("#frame").setAttribute("width", "50");
$("iframe").setAttribute("width", "31");
None of them work
他们都没有工作
回答by Anthony
As Sarfraz already pointed out, the correct way to set the attribute for a jquery selector object is by using the attr("attrName", "attrVal"). The reason the setAttributedidn't work is something worth explaining, as I've hit my head against this point on more than one occasion:
正如 Sarfraz 已经指出的那样，为 jquery 选择器对象设置属性的正确方法是使用attr("attrName", "attrVal"). setAttribute不起作用的原因值得解释，因为我不止一次反对这一点：
When you use jquery's selector syntax, it returns an object -- defined in jquery -- which is essentially a list of all of the elements that the selector matched. Whether it matches one element (which should always be the case with an id selector) or more than one, the returned object is the element list, never a single DOM object (eg single element). setAttributeis a method for actual HTMLElementobjects.
当您使用 jquery 的选择器语法时，它返回一个对象——在 jquery 中定义——它本质上是选择器匹配的所有元素的列表。无论它匹配一个元素（对于 id 选择器总是如此）还是多个元素，返回的对象是元素列表，而不是单个 DOM 对象（例如单个元素）。 setAttribute是用于实际HTMLElement对象的方法。
This is why
这就是为什么
$("#frame")[0].setAttribute("width", "200");
works, but
有效，但是
$("#frame").setAttribute("width", "200");
does not. The jquery element does not have that method, even though the HTMLElementobjects in its list do.
才不是。jquery 元素没有那个方法，即使HTMLElement它的列表中的对象有。
If you wanted to (for whatever reason) use a native HTMLElementmethod (or a method common to the elements your selector returns, such as inputs, etc), you can use jquery's each()method, like so:
如果您想（无论出于何种原因）使用本机HTMLElement方法（或选择器返回的元素通用的方法，例如输入等），您可以使用 jquery 的each()方法，如下所示：
// Set all iframes to width of 250
$("iframe").each(
function(index, elem) {
elem.setAttribute("width","250");
}
);
The each()method's callback can be passed two optional parameters, the first being the index of the element in the selector list, the second being the actual DOM element, which you can call native DOM methods on.
该each()方法的回调可以传递两个可选参数，第一个是选择器列表中元素的索引，第二个是实际的 DOM 元素，您可以在其上调用本机 DOM 方法。
Like I said, I've gotten really frustrated trying to figure out how to use jquery's selector results with native methods more than once, so I hope this helps clear up not only why setAttribute()doesn't work, but native methods in general, and how to actually get them to work when you can't find the jquery equivalent.
就像我说的那样，我在试图弄清楚如何多次使用 jquery 的选择器结果与本机方法一起使用时感到非常沮丧，所以我希望这不仅有助于澄清为什么setAttribute()不起作用，而且通常本机方法以及如何当您找不到等效的 jquery 时，实际上让它们工作。
回答by elclanrs
What about:
关于什么：
$('#frame').width(x)
or
或者
$('#frame').attr("width","50");
回答by Sarfraz
回答by Deepti Gehlot
$(document).ready( function() {
var ysr = $('iframe').attr('src');
var nysr = ysr + "HD=1;rel=0;showinfo=0";
$('iframe').attr('src', nysr);});
回答by Raekye
Edit: Saw you do have id. Could you see if the code is actually running? Like is it being triggered? Also, try changing allowfullscreento allowfullscreen="true"
编辑：看到你确实有身。你能看看代码是否真的在运行吗？好像是被触发了？另外，尝试更改allowfullscreen为allowfullscreen="true"
