一個鏈接在同一頁面上打開兩個iframe目標

我目前有一個工作網頁，其中包含一個在目標iFrame中打開的鏈接列表。我想添加一個後續的iFrame目標，並能夠在該iFrame中打開補充頁面以及使用相同鏈接的原始iFrame。一個鏈接在同一頁面上打開兩個iframe目標

從我的研究，似乎這應該是可能的一些JS，但我努力想出來。

所以基本上，我怎麼能點擊「Lot 1」，並在「圖庫」iFrame中打開Youtube，並在「info」iFrame中同時打開www.example.com？

<iframe src="" name="gallery"</iframe> 
    <iframe src="" name="info"</iframe> 

    <a href="http://www.youtube.com/" target="gallery">Lot 1</a> 
    <a href="http://www.youtube.com/" target="gallery">Lot 2</a>

來源

2017-04-24 Jake

你需要使用「javascript」 –

可以具有array/object存儲的鏈接，然後運行onClick事件，這將改變相應的iframe源將值從所述陣列（I幀具有src屬性您可以通過JS改變）。

例如：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var frm = ['gallery', 'info']; 
     var hrf = ['http://example.com/', 'http://example.net/']; 

     function setSource() { 
      for(i=0, l=frm.length; i<l; i++) { 
       document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[i]; 
      } 
     } 
    </script> 
</head> 
<body> 
    <iframe src="" name="gallery"></iframe> 
    <iframe src="" name="info"></iframe> 
    <span onclick="javascript: setSource();">Click me</span> 
</body> 
</html>

如果希望有多個span元素，每個改變不同iframe源到一組不同的鏈接，則可以始終使用一個多維數組（數組的數組），用於src和參數添加到函數：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var frm = ['gallery', 'info']; 
     var hrf = [['http://example0.com/', 'http://example0.net/'], ['http://example1.com/', 'http://example1.net/']]; 

     function setSource(num) { 
      for(i=0, l=frm.length; i<l; i++) { 
       document.querySelector('iframe[name="'+frm[i]+'"]').src = hrf[num][i]; 
      } 
     } 
    </script> 
</head> 
<body> 
    <iframe src="" name="gallery"></iframe> 
    <iframe src="" name="info"></iframe> 
    <span onclick="javascript: setSource(0);">Click me #0</span> 
    <span onclick="javascript: setSource(1);">Click me #1</span> 
</body> 
</html>

這裏hrf是一個包含在索引0和另一個彼此陣列（['http://example0.com/', 'http://example0.net/']）的陣列（['http://example1.com/', 'http://example1.net/'] ） - 在索引1處。通過將參數傳遞給setSource，我們可以選擇要從中選擇哪個子數組。

請不要忘記關閉您的標籤。

將a標籤用於您的目的不是一個好主意，我推薦使用span。 a標籤的用途是將用戶鏈接到另一個文檔，而不是運行javascript代碼（不使用a也意味着您不必使用preventDefault）。

javascript:前綴用於onclick屬性，爲一些較舊的移動瀏覽器提供向後兼容性。

來源

2017-04-24 03:24:10 Pyromonk

好的，謝謝你。我只是將你的示例複製到一個空白的html文檔中，但頁面不會加載到iframe中。我也試過JSfiddle，我錯過了什麼？ – Jake

@Jake，Google和Yahoo不允許在iframe中嵌入他們的頁面，我已經提供了這些鏈接作爲傻瓜（我會更新我的答案，因爲目前的確在這方面造成混淆）。這個問題的答案解釋了爲什麼某些網站不會在iframe中工作：http://stackoverflow.com/questions/16624919/why-iframe-dosent-work-for-yahoo-com – Pyromonk

啊謝謝，是有道理的！我正在瀏覽該示例並試圖瞭解它是如何工作的。假設我想有幾個「雙」的網站，你有example.com和example.net。例如example1.com＆example1.net，example2.com＆example2.net等。我只是將這些添加到數組中，並做出相應的onclick事件？ – Jake

一個鏈接在同一頁面上打開兩個iframe目標

回答

相關問題