我在这里玩了几个例子,但我似乎无法在不“重置”下拉菜单(选择没有值(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>
最佳答案
首先设置src = ""
,然后在最短的延迟之后,将其设置为您想要的src
:
http://jsfiddle.net/scdgw48g/3/
function loadPages() {
myFrame.src = "";
setTimeout(function () {
myFrame.src = urlSelect.value;
}, 0);
}
关于javascript - 通过下拉菜单更改 iframe src 不会加载新的 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33573703/