Standard iframe src onclick ändern und src nach Seitenaktualisierung beibehalten?

Question

Ich habe die folgenden iframe und thumbnails auf einer Seite. Wie kann ich Javascript verwenden, so dass immer, wenn ein Thumbnail angeklickt wird, das Daten-embed-src das Standard-src für den iframe wird?

<iframe name = "starterVID" id = "starterVID" width="870" height="498" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen scrolling="no"></iframe> 
</li> 

    <li class="span9"> 
     <h3>Example</h3> 
    <ul class="thumbnails"> 







     <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid </a> </li> 

      <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="http://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid0 </a> </li> 



    <!--  <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid1</a></li> 
--> 

    <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid2</a></li> 

</li> 
      </ul> 

      <ul class="thumbnails"> 

    <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://www.youtube.com/embed/" href="http://www.youtube.com/watch"><img src="http://i4.ytimg.com/vi/" alt="">Vid3</a></li> 

     <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid4</a></li> 


    <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="http://player.vimeo.com/video/" href="https://vimeo.com/"><img src="https://i.vimeocdn.com/video/" alt="">Vid5</a></li> 

    <li class="span3"><a class="thumbnail cboxElement" rel="colorbox" data-embed-src="https://goo.gl/"><img src="https://goo.gl/" alt="">Picture</a></li> 

Ich hatte den größten Erfolg im folgenden mit Hilfe von Javascript, aber da ich nicht viel Glück mit diesem Ansatz hatte ich versucht, einen anderen Ansatz dachte:

<script type="text/javascript"> 
    function setIframeSource() { 
     var theSelect = document.getElementById('choice'); 
     var theIframe = document.getElementById('starterVID'); 
     var theUrl; 

     theUrl = theSelect.options[theSelect.selectedIndex].value; 
     theIframe.src = theUrl; 
    } 
</script> 
<script> 
    function loadFrame(val, id){ 
     localStorage.setItem(val, id); 

     if(typeof localStorage.getItem('starterVID') != 'undefined'){ 
      $('select').val(localStorage.getItem('starterVID')); 
     }   
    } 
</script> 

Answer 1

zu Holen Sie sich den Wert eines data-attribute, ich glaube, Sie sollten getAttribute() verwenden.

getAttribute() gibt den Wert eines bestimmten Attributs auf dem Element. Wenn das angegebene Attribut nicht existiert, ist der zurückgegebene Wert entweder null oder "" (der leere String);

function setIframeSource(vid) { 
 
    var vid = vid.getAttribute('data-source'); 
 
    var theIframe = document.getElementById('myframe'); 
 
    theIframe.src = vid; 
 
}

body { 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:space-around; 
 
}

<p><a data-source="https://youtube.com/embed/t2ByLmLnYJ8" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play Iframe video ?</a> 
 
</p><iframe src="https://stackoverflow.com/questions/46289527/change-default-iframe-src-onclick" id="myframe"></iframe> 
 
<p><a data-source="https://youtube.com/embed/fORZASxZMEQ" onclick="setIframeSource(this);return false;" href="https://youtube.com/embed/fORZASxZMEQ">Play astro video ?</a> 
 
</p>

Über die lokale Speicherung, Sie auf Last sollte, überprüfen Sie, ob es irgendwelche Daten noch ist, zu verwenden, sonst eine Standard-URL verwenden.

Beispiel

window.onload = function() { 
    var loadvid = localStorage.getItem("test"); 
    if (loadvid) {//if anything retrieved 
    setIframeSource('', loadvid); 
    } else {// if empty yet 
    var theIframe = document.getElementById("myframe"); 
    var defaultUrl = theIframe.getAttribute('data-src'); 
    theIframe.src = defaultUrl; 
    } 
}; 
function setIframeSource(vid, video) { 
    if (!video) {// if not from onload or empty yet 
    var video = vid.getAttribute("data-source"); 
    } 
    var theIframe = document.getElementById("myframe"); 
    video = video.replace(/"/g, ''); 
    theIframe.src = video; 
    if (vid) {// if from onclick , then store it 
    localStorage.setItem("test", JSON.stringify(video)); 
    } 
} 

https://codepen.io/gc-nomade/pen/yzOVEL