一个链接在同一页面上打开两个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目标

回答

相关问题