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

Question

我创建了一个下拉列表，该列表将更新iframe src，但是，当我刷新页面时，除非用户从 dropdown menu更改它，否则我将不会更改页面。使用JavaScript？

<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>
          <option value="google.com">Vid05</option>
          <option value="google.com">Vid06</option>
          <option value="google.com">Vid07</option>
          <option value="google.com">Vid08</option>
          <option value="google.com">Vid09</option>
          <option value="google.com">Vid10</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>

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存储了最后一选的数据。

希望这对您有帮助。