问题描述

我的页面上有以下 iframe 和缩略图.如何使用 javascript 以便在单击缩略图时，data-embed-src 成为 iframe 的默认 src?

I have the following iframe and thumbnails on a page. How can I use javascript so that whenever a thumbnail is clicked, the data-embed-src becomes the default src for the iframe?

<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>
</ul>

我使用以下 javascript 获得了最大的成功，但是由于我对这种方法没有太多的运气，所以我正在考虑尝试一种不同的方法:

I had the most success using the following javascript, however since I haven't had much luck with this approach I was thinking of trying a different approach:

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

推荐答案

要检索 data-attribute 的值，我相信你应该使用 getAttribute().

To retrieve the value of a data-attribute, i believe you should use getAttribute().

getAttribute() 返回元素上指定属性的值.如果给定属性不存在，则返回的值将是 null 或 ""(空字符串)；

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>

关于本地存储，你应该在加载时，检查是否有任何数据尚未使用，否则使用默认url.

About local storage, you should on load, check if there is any data yet to use, else use a default url.

例子

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

这篇关于在页面刷新后更改默认 iframe src onclick 并保留 src?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！