使用 JavaScript 更改 iframe src 不起作用答案

【问题标题】：Changing iframe src with JavaScript not working使用 JavaScript 更改 iframe src 不起作用
【发布时间】：2013-03-19 17:22:20
【问题描述】：

我正在尝试从 img 中提取 YouTube 视频 ID，然后将其传递到 iframe 以播放嵌入的视频。我的 iframe 位于一个 div 中，在单击 img 之前它是不可见的：

<div id="testimonialbackground" style="display:none;">  
    <a href="#" onclick="toggledisplay(this);">Click here</a> to close the video  
    <iframe id="testimonialframe" src="" frameborder="0" allowfullscreen></iframe>  
</div>  
<img src="http://img.youtube.com/vi/x-ROeKGEYSk/1.jpg" onclick="toggledisplay(this);" />

这里是 JavaScript。在这一行 elem.setAttribute('src', newsrc); 之前它工作正常，此时我的页面冻结：

function toggledisplay(obj) {  
    var div = document.getElementById('testimonialbackground');  
    var elem = document.getElementById('testimonialframe');  
    if (div.style.display == "block") {  
        div.style.display = "none";  
        elem.setAttribute('src', "");  
    }  
    else {  
        div.style.display = "block";  
        var explosion = obj.src.split("/");  
        var newsrc = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";  
        elem.setAttribute('src', newsrc); // <---- BROKEN LINE RIGHT HERE
        elem.contentWindow.location.reload(); //to refresh the iframe  
    }  
}

感谢您的帮助！

【问题讨论】：

标签： javascript iframe youtube

【解决方案1】：

src 是一个您可以直接访问的属性，因此您可以直接使用 elem.setAttribute('src', newsrc); 而不是您的行：

elem.src = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";

设置src 后，无需刷新iframe，因为设置src 会自动完成。见What's the best way to reload / refresh an iframe using JavaScript? 有关重新加载 iframes 的更多信息。（基本上它指出您可以将iframe 的src 设置为自身以刷新iframe。

【讨论】：