更改 iframe 的 src 并重新加载 iframe。

Question

我成功地用JavaScript更改了iframe的src。

var path='images/tattoo/fullsize/';
var h=$('#borderlessFrame').height();
var bigFrame=$('#borderlessFrame');
function loadGallery(num)
{
    bigFrame=$('#borderlessFrame');
    var galPath=path + num;             // path to the image
    h=$('#borderlessFrame').height();
    var source=bigFrame.attr('src');
    source='i load some address here';
}

但现在我看到的是iframe的旧内容，有没有方法可以重新加载iframe（仅重新加载iframe而不是整个页面）？我试图实现一个简单的画廊，底部是缩略图，顶部是大图片（iframe）。当点击任何一个缩略图时，我更改iframe的内容而不重新加载实际页面。

请记住，我对html/javascript/jquery都很陌生。因此，基本上我需要一种方法（函数？）来重新加载iframe。

- Jordashiro

---

在11行代码中，您成功地4次查询了'#borderlessFrame'...请缓存引用！ - Šime Vidas

document.getElementById('calendar').src = loc; 将loc赋值给ID为“calendar”的元素的src属性。 - stian.net

我一直以为如果你更改了src，它会自动重新加载框架？ - 472084

@Jleagle，确实如此，但他从未实际更改过iframe的src。 - Kevin B

Answer 1

要设置属性，您需要调用.attr( attributeName, value )

尝试这样做：

var source='i load some address here';
bigFrame.attr('src', source);

参考资料：

jQuery .attr()

- Sarim

---

只是出于好奇，这个代码不是做同样的事情吗？ var source=bigFrame.attr('src'); source='我在这里加载一些地址'; - Jordashiro

好的，我回答了我的问题，所以我猜它不做同样的事情。 你提供的代码有效，再次谢谢。 - Jordashiro

好的，请阅读以下链接，.attr( attributeName ) 返回值：字符串 实际上这是一个“获取”函数。它返回属性。你正在将src属性分配给“source”变量。但是返回的值是克隆，不是通过引用连接到属性的。所以当你 source = 'some address'; 时，它只会改变source变量，而不是与iframe元素链接。还有，.attr( attributeName, value ) 描述：为匹配的一组元素设置一个或多个属性这是一个设置方法。它将元素的“attributeName”（这里是“src”）设置为给定值。 - Sarim

这并不会像发帖者所要求的那样重新加载新的资源。它只是将 iframe 的属性设置为新的源。 - Dawn Green

2016年更新：现在你应该使用.prop()方法而不是.attr()。 - thekingoftruth

Answer 2

jQuery有load方法，可以像这样使用（假设borderlessFrame是<iframe>的id）：

var iFrame = $('#borderlessFrame');
iFrame.load('http://theurltoload.com')

然而，如果您的要求不需要使用iframe，可以考虑更深入地了解CSS和jQuery DOM操作方法。

- Rich O'Kelly