4

imgからYouTubeビデオIDを取得し、それをiframeに渡して埋め込みビデオを再生しようとしています。私のiframeは、imgがクリックされるまで表示されないdiv内にあります。

<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  
    }  
}

助けてくれてありがとう！

4

1 に答える 1

6

srcは直接アクセスできる属性なので、行の代わりに次をelem.setAttribute('src', newsrc);使用します。

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

一度設定すると、srcを更新する必要はありません。iframe設定するsrcと自動的に更新されます。JavaScriptを使用してiframeをリロード/更新するための最良の方法は何ですか？を参照してください。 リロードの詳細についてはiframes。（基本的にsrcは、iframeをそれ自体に設定して更新できることを示していますiframe）。

于 2013-03-19T17:30:05.637 に答える