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

Question

我创建了一个下拉列表来更新 iframe src，但是如何确保刷新页面时 iframe src 不会更改，除非用户从下拉菜单中更改它使用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 来存储最后选择的数据。

希望这对您有帮助。