嘗試在div彈出框中加載不同的iframe，具體取決於單擊了幾個鏈接中的哪個以打開框

Question

我有一個疊加彈出框（DIV + JavaScript +一些CSS），可以通過鏈接進行切換，如下所示：

<a href="#" onclick="popup('popUpDiv')">

彈出的框包含一個iframe。 現在，我希望頁面打開時，頁面上的不同鏈接能夠加載不同的iframe； 因此，鏈接A會切換框顯示，然后將iframe1.html加載到該框內，而鏈接B會切換同一框顯示，但將iframe2.html加載到框內，依此類推。

我是一個剛開始的程序員，我首先想到可以使用PHP來實現此目的，方法是在popUpDiv中放入以下內容：

<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">

...，然后只需將?iframeid=x添加到每個鏈接的href中，其中x是要加載的iframe的ID。

但是，這實際上在實踐中不起作用，因為它需要重新加載頁面，並且在單擊鏈接時，將popUpDiv切換為打開狀態，但同時，頁面也將重新加載，現在使用?iframeid=x查詢字符串到位，但為時已晚，因為popUpDiv在重新加載時消失了。

也許可以使用等效的JavaScript，或者有人可以建議另一種方法來完成這項工作嗎？

僅供參考，這是我正在使用的彈出框： http : //www.pat-burt.com/csspopup.html

Answer 1

我終於找到了一種非常簡單的方法來完成此任務，而無需使用其他JavaScript，只需使用target屬性即可：

<iframe name="myfavoriteiframe">

然后：

<a href="http://example.com/iframecontent.html" target="myfavoriteiframe" onclick="popup('popUpDiv')">This is a link.</a>

PS Just FYI，針對那些可能希望與Vimeo的JavaScript API一起使用此功能的人，正如我正在做的那樣：為了使API按鈕可與此target方法一起使用，似乎無法保留iframe src -attribute空白。 您需要在src指定指向任何視頻的鏈接，以便在頁面加載時將視頻加載到iframe中，如下所示：

<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&amp;player_id=player_1">

我只是將URL插入頁面上的第一個視頻中，但是您可以使用其中的任何一個，因為它們還是被隱藏了。

然后使用上述target方法鏈接到您的任何視頻，預設的iframe視頻將由您選擇的視頻替換。

Answer 2

創建具有兩個內容變化形式的兩個div（每個iURL具有兩個特定的iframe）。 然后按div的名稱切換。

<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">

適當設置div元素的id屬性。

Answer 3

與其向彈出式DIV元素中添加內容，不如將一個必需的鏈接添加到用於打開彈出窗口的鏈接的href屬性中：

<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">

然后在popup功能中，我將使用觸發事件的鏈接的href參數，並在彈出窗口中使用它：

function pre_popup(id) {
    // Take the href parameter of the link
    var href = this.href;

    // And then use it in the iframe
    window.frames["your_iframe"].src = href;

    // And then pop it
    popup(id);
}