gpt4 book ai didi

javascript - 如何在同一个
容器中加载远程 html 页面链接?

转载 作者:太空宇宙 更新时间:2023-11-03 17:42:15 24 4
gpt4 key购买 nike

这对我来说很难解释,但我会尽力而为。

我正在使用 HTML、CSS 和 JavaScript 编写一种可移植图书系统。它本质上是一个网站;你可以把这个包放在网上,它可以像一个完整的网站一样运行,或者把它保存在机器上,就像一个网站一样阅读它。

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

我在尝试使它在我的主 .htm 文件的 <div id="content"> 中遇到问题标记总是加载外部 .htm 文件,即使这些外部 .htm 文件有 <a>他们自己的链接。

我试过使用 jQuery 来运行 load() ,但是当呈现新内容并且我单击新内容中的那些链接时,它完全脱离了我的主页并将完整的外部 .htm 文件加载到我的浏览器中。

我想我明白为什么了。当我使用 $('a')加载后,它只会将该功能呈现给 index.htm 自己的链接,而不是我加载到 <div> 中的新链接。 .

我不想要这种效果。我希望每次都加载每个链接,以便始终将链接的 .htm 文件中的内容绘制到 index.htm 的 <div> 中。 .

我环顾四周,在这里找到了几个相关的答案,但它们要么不起作用,要么给我相同的结果。一个是名为“PJAX”的插件,看起来它在库示例中有效,但是当我将它加载到我自己的元素中时它没有运行。我试过使用 ajax()我在另一个解决 url 的答案中看到的电话cachesuccess参数,但没有用。

我做错了什么?我不认为加载外部 .htm 文件并在其 <a> 中重复加载这么简单。不会像阻止我解决这个问题那样复杂。我以为 load()在我点击另一个 <a> 之前,这个函数一直在工作链接。

代码示例有助于阐明我在说什么。不是完整的文件或完美的,而是模型。

索引.htm

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

page2.htm

<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>

渲染页面.js

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

当 page2 的链接加载到索引的 <div> 中时,然后单击其中的链接,它不会更改 <div>到 page1 的内容。它将整个 page1 重新加载到浏览器中。

最佳答案

结果查德的回答是正确的。如果有人想插话,我想了解它是如何工作的。

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

关于javascript - 如何在同一个 <div> 容器中加载远程 html 页面链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28880924/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com