새로 고침 후 메뉴 드롭 다운에서 iframe src 유지

Question

iframe src를 업데이트하는 드롭 다운 목록을 만들었지 만, 페이지를 새로 고침 할 때 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을 사용하여 마지막으로 선택한 데이터를 저장했습니다.

희망이 도움이 될 것입니다.