Question

我需要创建一个链接，打开一个页面，然后在该页面的iframe中设置一个新目标吗？

例如。

'Link1'必须链接到'index.html'这个页面上已经有一个iframe，但是当'index.html'加载时我需要'hamsters.html'加载到iframe中。

还会有一个

'Link2'和'Link3'这些也将链接到'index.html'但是'link2'将加载页面'rabbits.html'在iframe中，'link3'将加载页面'gerbils.html'在iframe中。 iframe仍然位于'index.html'。

我希望这很清楚，我的原始链接代码，示例中的'link1'位于下方。

由于

<td onclick="window.location = 'index.html';" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF">

Answer 1

Magnus Engdal是正确的，但您可以使URL获取代码更容易。使用哈希而不是查询字符串，因此您将data-iframe更改为：

<td class="link" data-iframe="index.html#hamsters.html"></td>
<td class="link" data-iframe="index.html#rabbits.html"></td>

在新页面上：

$("#iframe").attr("src", window.location.hash);

完成。节省了大量代码（以及带宽和速度）。

BTW不要忘记将此代码添加到第一个网页：

$(function () {
    $('.link').click(function () {
        window.location.href = $(this).data('iframe');;
    });
});

Answer 2

让我从这开始：
不要内联样式！此外，
不要内联Javascript！

然后，更相关的信息，您可以做以下代码。只需将data属性添加到您想要的任何元素（除非您使用锚点，在这种情况下您应该熟悉代码）并且它将起作用：

<div data-link="index.html">Click me for index</div>
<label data-link="index2.html">Click me for index2<label>

Javascript：

$(document).ready(function(){
    // Use jQuery to select all element with the 'data-link' attribute
    $('[data-link]').on('click', function(e){ // add a click eventlistener to it
        e.preventDefault(); // this is optional, prevent what it normally would do
        $('#iframe')[0].src = $(this).data('link'); // set the iframe to the value of the attribute
    });
});

另外一点，这不是要走的路:)使用PHP和一些方便的网址：

<a href="index.php?page=gerbils">Gerbils</a>
<a href="index.php?page=hamsters">hamsters</a>

并制作index.php切换页面。有很多简单的例子可以告诉你如何做到这一点。这是2014年，除非你有充分的理由，否则不要使用iframe 这将允许您有一天切换到漂亮的网址：

<a href="/gerbils">Gerbils</a>
<a href="/hamsters">hamsters</a>

Answer 3

如果我理解正确，您想要重定向到iframe所在的另一个页面。由于其他答案都没有解决这个问题，您可以将iframe目标作为查询字符串发送。

以下是一个例子：

在原始页面上

<强> HTML

<td class="link" data-iframe="hamsters.html"></td>
<td class="link" data-iframe="rabbits.html"></td>

<强> JS

$(function () {
    $('.link').click(function () {
        window.location.href = "index.html?iframe=" + $(this).data('iframe');;
    });
});

当您点击原始网页上的<td>类link元素时，您将被重定向到index.html?iframe= + data-iframe中包含的任何内容。

现在您只需要在index.html上处理传入的请求，如下所示。

<强> HTML

<iframe id="iframe"></iframe>

<强> JS

$(function () {
    if (typeof getUrlVars()["iframe"] != 'undefined') {
        $("#iframe").attr("src", getUrlVars()["iframe"]);
    }
});

function getUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

从here借用getUrlVars。

Answer 4

试试这个：

<td onclick="(function(){window.location='index.html';})()" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF">

但是Martijn是对的，如果可能的话，你不应该在你的标签中插入任何Javascript或CSS

在新页面上的iframe中创建链接加载内容

4 个答案: