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

Question

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

举例来说。

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

也将有一个

“链路2”和“链接3”这些也将链接到是index.html，但“链接2”将加载页面“rabbits.html'in的iframe和” LINK3 '将在iframe中加载'gerbils.html'页面。 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

试试这个：

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

但马亭是正确的，你不应该被内联任何JavaScript或CSS在你的标签，如果可能的

Answer 2

让我开始与此：
不要内联风格！也;
不要内联Javascript！

然后，更相关的信息，你可以做一些代码如下。只需将数据属性添加到您想要的（除非你用锚，你应该善于在这种情况下的代码）的任何元素，它会工作：

<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

Magnus Engdal是正确的，但您可以使URL获取代码更容易。使用哈希代替查询字符串，所以你更改数据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');; 
    }); 
});