2015-11-06 80 views
1

我在這裏玩了幾個例子,但似乎無法加載新的iframe而沒有「重置」下拉菜單(選擇「pick度假村「選項沒有價值)。有一種方法可以在選擇新選項後動態更改iframe?通過下拉菜單更改iframe src不會加載新的iframe

這裏有一個小提琴: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> 
+0

如果您檢查您的控制檯爲小提琴跟它的作用是不確定的。 – Taplar

+0

在小提琴中工作:http://jsfiddle.net/ykdug757/如果您在左側工具欄上添加jQuery時選擇了「無包身」選項。也應該在你的網頁上工作。 –

回答

2

首先設置src = "",然後最小的延遲後,將其設置爲src你想:

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

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

你能指點我在哪裏'urlSelect.value'是如何讀取選擇選項值? – LGSon

+0

@ gilly3 This Works,thank you !!! – user1757452

+0

@LGSon - HTMLSelectElement接口的'value'屬性在[DOM Level 2規範]中定義(http://www.w3.org/TR/DOM-Level-2-HTML/html.html# ID-59351919),並在[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#Properties)和[MSDN](https://msdn.microsoft.com /en-us/library/ms535893(v=vs.85).aspx) – gilly3

1

您需要添加一個爭取您的某個網址來區分它們。我認爲瀏覽器將它們視爲相同的URL,因爲它們都以http://forecast.io/embed/#lat=開頭。嘗試以下操作。注意我是如何加入?different第二url:

<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/?different#lat=39.6061&lon=-106.3571&name=Vail&font=inherit">Vail</option> 

這可能也有興趣,但我不認爲它適用於您的情況:

有些網站不允許自己被裝入一個iframe。他們通過設置X-Frame-Options response header來做到這一點。當我將http://forecast.io的網址更改爲http://apple.comhttp://rogers.com時,一切正常。但是,當我將它們更改爲http://google.comhttp://microsoft.com時,Chrome引發了以下錯誤。這是因爲Microsoft和Google網站不允許將自己加載到外部網站上的iframe中。當您單擊按鈕

Refused to display 'http://www.microsoft.com/fr-ca/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.