通過下拉菜單更改iframe src不會加載新的iframe

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

<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>

來源

2015-11-06 user1757452

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

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

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

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

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

來源

2015-11-06 19:15:39 gilly3

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

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

@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

您需要添加一個爭取您的某個網址來區分它們。我認爲瀏覽器將它們視爲相同的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.com和http://rogers.com時，一切正常。但是，當我將它們更改爲http://google.com和http://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'.

來源

2015-11-06 19:17:44 MarkPlewis

通過下拉菜單更改iframe src不會加載新的iframe

回答

相關問題