刷新后从下拉菜单中保留iframe src

Question

我创建了一个下拉列表，它将更新iframe src，但是我如何确保在刷新页面时iframe src不会更改，除非用户使用{{1}从dropdown menu更改它}}？

JavaScript

Answer 1

您可以使用解决方案https://jsfiddle.net/cb10bwkL/2/

loadFrame = function(val, id){
  localStorage.setItem(id, val);
  $('#' + id).attr('src', val);
}

if(typeof localStorage.getItem('starterVID') != 'undefined'){
  $('select').val(localStorage.getItem('starterVID'));
  $('#starterVID').attr('src', localStorage.getItem('starterVID'))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="span9">
    <ul class="thumbnails">
      <li class="span9">
        <select onchange="loadFrame(this.value,'starterVID');this.selectedIndex=0;">
          <option>Choose A View</option>
          <option value="yahoo.com">Vid02</option>
          <option value="youtube.com">Vid03</option>
          <option value="google.com">Vid04</option>
        </select>
        <div class="flex-video widescreen vimeo">
          <iframe name = "starterVID" 
                  id = "starterVID" 
                  width="870" 
                  height="498" 
                  src="https://www.youtube.com/" 
                  frameborder="0" 
                  allowfullscreen>
          </iframe>
        </div>
      </li>
    </ul>
  </div>
</div>

您的选项值应该是唯一的。

我已使用localStorage存储最后选择的数据。

希望这会对你有所帮助。