使链接在新页面的 iframe 中加载内容

Question

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

例如。

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

还会有一个

'Link2' 和 'Link3' 这些也将链接到 'index.html' 但是 'link2' 将在 iframe 中加载页面 'rabbits.html'，而 '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);

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

顺便说一句，不要忘记将此代码添加到第一个网页：

$(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 和一些方便的 url：

<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');;
    });
});

当您在原始页面上单击类link 的<td> 元素时，您将被重定向到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