在与链接相同的 DIV 中加载页面答案

【问题标题】：Load page in same DIV as link在与链接相同的 DIV 中加载页面
【发布时间】：2013-09-11 18:33:11
【问题描述】：

我正在使用 jQuery 将页面加载到 DIV 中，效果很好。在 DIV 中加载的页面上，我有一个链接，当单击此链接时，我想将该页面打开到与加载页面相同的 DIV 中。我不知道从哪里开始，我已经做了很多研究。有人可以帮忙吗？

我正在使用它来将页面加载到 DIV 中。

 $(function(){
     $('#div').empty();
     $('.nav a').on('click', function(e){
         e.preventDefault();
         var page_url=$(this).prop('href');
         $('#content').load(page_url);
     });
 });

【问题讨论】：

标签： jquery html hyperlink load

【解决方案1】：

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load('somepageuri');
});

编辑：可能不希望链接成为“真正的”链接，但您可以设置它的样式。尽管如此，上面的 onclick 事件仍然有效。只要知道，如果您使用合法链接，您将需要使用一些 js 或使用以下 href 来中和它：

<a href="javascript:"

或类似的。

如果您使用合法链接并使用 javascript 中和正常的链接行为，您可以从链接中提取 href，对我上面的第一个代码块稍作修改。

$('#yourlinkinthediv').on('click',function(){
    $('#yourdiv').load($(this).attr('href'));
});

【讨论】：

太棒了，很高兴听到它！

【解决方案2】：

您可以为此使用<iframe>，并将其高度和宽度设为其包含 div 的 100%。

HTML 1

<script>
$(function(){
    $('#div').empty();
    $('#content').html('<iframe src="embed.html" height="100%" width="100%" />');
});
</script>

<div id="div"></div>
<div id="content"></div>

HTML 2（嵌入页面）

<script>
$('.nav a').on('click', function(e){
    e.preventDefault();
    var page_url=$(this).prop('href');
    $('#test').load(page_url);
});
</script>

<div id="test" class="nav">
    <a href="http://www.wikipedia.com">Link</a>
</div>

【讨论】：