Question

我目前有一个工作网页，其中包含在目标iFrame中打开的链接列表。我想添加一个后续的iFrame目标，并能够打开该iFrame中的补充页面以及具有相同链接的原始iFrame。

根据我的研究，似乎这应该可以与一些JS，但我很难弄明白。

基本上，我怎么能点击“Lot 1”并在“gallery”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>

Answer 1

您可以使用array / object存储链接，然后运行onclick事件，将相应的iframe源更改为所述数组中的值（iframe有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＆＃39;来自不同链接集的源代码，您始终可以使用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.通过将参数传递给{{1我们可以选择我们想要选择的子阵列来获取源代码。

<小时/> 请不要忘记关闭标签。

将setSource标记用于您的目的不是一个好主意，我建议您使用a。 span代码的目的是将用户链接到另一个文档，而不是运行javascript代码（不使用a也意味着您不必使用preventDefault）

a前缀用于javascript:属性，以便为某些较旧的移动浏览器提供向后兼容性。

一个链接会在同一页

1 个答案: