javascript - 通过下拉菜单更改 iframe src 不会加载新的 iframe

Question

我在这里玩了几个例子，但我似乎无法在不“重置”下拉菜单(选择没有值(value)的“选择度假胜地”选项)的情况下加载新的 iframe。选择新选项后，有没有办法动态更改 iframe？

这是一个 fiddle :http://jsfiddle.net/scdgw48g/

<h2>Your Powder Forecast</h2>
<p>Pick a location to see who's getting hit!</p>
<select id="selectResort">
<option>Pick Resort</option>
<option value="http://forecast.io/embed/#lat=42.3583&lon=-71.0603&name=Downtown Boston&font=inherit">Boston</option>
<option value="http://forecast.io/embed/#lat=39.6061&lon=-106.3571&name=Vail&font=inherit">Vail</option>
</select>
<button onClick="loadPages()">See Forecast</button>

<iframe id="myFrame" type="text/html" frameborder="0" height="245" width="100%" src=""> </iframe>

 <script>
    var urlSelect = document.getElementById('selectResort'),
    myFrame = document.getElementById('myFrame');
    function loadPages() {
    var loc = urlSelect.value;
    // You can also do -> myFrame.src = loc;
    myFrame.setAttribute('src', loc);
   }
 </script>

Answer 1

首先设置src = ""，然后在最短的延迟之后，将其设置为您想要的src:

http://jsfiddle.net/scdgw48g/3/

function loadPages() {
    myFrame.src = "";
    setTimeout(function () {
        myFrame.src = urlSelect.value;
    }, 0);
}