Question

这对我来说很难解释，但我会尽我所能。

我正在编写一种使用HTML，CSS和JavaScript的便携式图书系统。它本质上是一个网站;你可以在线投放包装，它可以像一个完整的网站一样运作，或者将它保存在机器本地，就像它是一个网站一样。

这意味着我不能使用PHP或MySQL之类的东西;这都是使用浏览器功能，因为任何在自己的计算机上阅读它的人都可能没有安装WAMP等来运行它。

我在尝试制作它时遇到问题，以便在我的主.htm文件中<div id="content">标记始终加载外部.htm文件，即使这些外部.htm文件具有{{ 1}}他们自己的链接。

我尝试使用jQuery来运行<a>，但是当新内容呈现并且我点击了新内容中的那些链接时，它完全从我的主页面中删除并将完整的外部.htm文件加载到我的浏览器。

我想我理解为什么。当我在加载后使用load()时，它只会将该函数呈现给index.htm自己的链接，而不是我加载到$('a')的新链接。

我不想要这种效果。我希望每次都能加载每一个链接，始终将链接的.htm文件中的内容绘制到index.htm＆＃39; <div>。

我环顾四周，在这里找到了几个相关的答案，但他们要么不工作，要么给我相同的结果。一个是名为＆＃34; PJAX＆＃34;的插件，它看起来像在库示例中工作，但是当我将它加载到我自己的项目中时，它并没有运行。我已经尝试使用我在另一个回答中看到的<div>来电，这些回复解决了ajax() url和cache参数，并且没有效果。

我做错了什么？我没有想到像加载外部.htm文件那样简单的事情，并且重复其success内部的负载并不会像任何阻止我修复它的那样错综复杂。在我点击其他<a>链接之前，我认为load()功能完成了这项工作。

代码示例，以帮助澄清我在谈论的内容。不完整的文件或完美，但模型。

的index.htm

<a>

page2.htm

<body> <!-- book interface -->
    <div id="content"></div>
</body>

renderpage.js

<body> <!-- a sample page read on the book, fed in the #content -->
<a href="page1.htm">test link</a> <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>

当第2页的链接在索引$(document).ready(function(){ $('a').click(function(e){ e.preventDefault(); $('#content').load($(this).attr('href')); return false; }); });内加载，并且您点击其中的链接时，它不会将<div>更改为第1页＆＃39; s内容。它将整个page1重新加载到浏览器中。

Answer 1

原来乍得的回答是正确的。如果有人感觉像是在喋喋不休，我想知道它是如何运作的。

$(document).ready(function(){
  $(document).on('click', 'a', function(e){
    e.preventDefault();
    var ahref = $(this).attr('href');
    $('#content').load(ahref);
    return false;
  });
});

如何在同一个<div>容器中加载远程html页面链接？</div>

1 个答案: