一个链接在同一页面上打开两个 Iframe 目标 [英] One link opens two Iframe targets on same page
问题描述
我目前有一个工作网页，其中包含在目标 iFrame 中打开的链接列表.我想添加一个后续 iFrame 目标，并能够打开该 iFrame 中的补充页面以及具有相同链接的原始 iFrame.
I currently have a working webpage that has a list of links that open in a targeted iFrame. I would like to add a subsequent iFrame target and be able to open supplementary pages in that iFrame as well as the original iFrame with the same link.
从我的研究来看，这似乎应该可以用一些 JS 实现，但我正在努力弄清楚.
From my research, it seems this should be possible with some JS but I'm struggling to figure it out.
所以基本上，我怎样才能点击Lot 1"并同时在画廊"iFrame 和信息"iFrame 中打开一个 Youtube，比如说 www.example.com?
So basically, how could I click on "Lot 1" and open up a Youtube in the "gallery" iFrame and, say, www.example.com in the "info" iFrame simultaneously?
<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>
推荐答案
您可以拥有一个 数组/object 存储链接，然后运行一个 onclick 事件，将相应的 iframe 源更改为来自所述数组的值(iframes 有一个 src 属性，您可以通过 JS 更改该属性).
You can have an array/object storing the links, and then run an onclick event that will change the corresponding iframe sources to the values from said array (iframes have a src attribute which you can change through 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 并给函数添加一个参数:
If you'd like to have multiple span elements, each changing the iframes' sources to a different set of links, you can always use a multidimensional array (an array of arrays) for src and add a parameter to the function:
<!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 是一个数组，其中包含另一个数组 (['http://example0.com/', 'http://example0.net/']) 在索引 0 和另一个 (['http://example1.com/', 'http://example1.net/']) - 在索引 1.通过将参数传递给setSource 我们可以选择我们想要选择的子数组来获取源.
Here hrf is an array that contains another array (['http://example0.com/', 'http://example0.net/']) at index 0 and yet another one (['http://example1.com/', 'http://example1.net/']) - at index 1. By passing a parameter to setSource we can choose what subarray we want to pick to get the sources from.
<小时>请不要忘记关闭您的标签.
Please don't forget to close your tags.
使用 a 标签不是一个好主意，我建议使用 span.a 标签的目的是将用户链接到另一个文档，而不是运行 javascript 代码(不使用 a 也意味着您不必使用 preventDefault).
Using the a tag for your purpose is not a good idea, I recommend using a span. The a tag's purpose is to link the user to another document, not run javascript code (not using a also means you don't have to use preventDefault).
javascript: 前缀用于 onclick 属性，以提供对某些旧版移动浏览器的向后兼容性.
The javascript: prefix is used for the onclick attribute to provide backwards compatibility for some older mobile browsers.
这篇关于一个链接在同一页面上打开两个 Iframe 目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
