如何使用 AJAX 作为 iframe 的替代品？答案

【问题标题】：How can I use AJAX as an alternative to an iframe?如何使用 AJAX 作为 iframe 的替代品？
【发布时间】：2023-04-02 13:41:01
【问题描述】：

目前我在我的网站上使用 iframe 来显示来自其他页面的内容，例如表单。我遇到的问题是在登录页面上，当用户使用 iframe 中的表单登录时，它只会在登录 iframe 中显示下一页 - 这是完全没用的。

我听说 AJAX 对于这样的事情更加灵活和动态，但我不知道如何使用它，我查看了一些教程，但在显示页面中的页面。

如何用 AJAX 替换我的 iframe？

提前致谢:)

【问题讨论】：

标签： php ajax iframe

【解决方案1】：

由于您不会使用 iFrame，因此您需要一个容器来放入您的页面。对于 AJAX，通常的做法是使用 <div> 元素来保存该数据。此外，jQuery 或其他支持 AJAX 的 Javascript 库将通过工作测试代码让您的生活更轻松，因此您可以专注于您的业务逻辑而不是细节。因此，在您的 HTML 中，您将需要一个容器元素：

<div id="otherpage"></div>

然后在一个包含的 javascript 文件中，你可以使用这个 jQuery：

$(document).ready(function() {
   $('#otherpage').load('otherpage.html', function() {
      alert('Load was performed.');
   });
});

当然，在使用它之前，请确保您也包含 jQuery。 This tutorial 应该可以帮助您开始使用 jQuery。

【讨论】：

谢谢！这正是我想要做的，并且解释得非常清楚。谢谢你:) x
我刚刚发现了这个，并认为它只是替换一些 iframe 的东西。我将代码复制到我的页面中，然后砰！它第一次完美运行。然后我尝试单击“其他页面”中的按钮，但没有成功。该按钮还操作了一些 jQuery。我在尝试做不可能的事吗？或者这只是我遗漏的一个微不足道的小问题？
4 年后才看到这条评论，因为有人投了赞成票。为了回答未来的读者，当您动态加载 HTML 内容时，您需要确保您的 jquery 绑定在文档上，而不是在元素上。例如：$(document).on('click', '.my-button', myHandler); 而不是 $('.my-button').on('click', myHandler);

【解决方案2】：

您面临的问题与 ajax 的关系比其他任何事情都多。

尝试在宿主 html 中“预加载”你的 js 函数（不是通过 ajax 加载的函数），然后通过 ajax 加载特定的渲染 html。

然后，使用 jquery ".done( function(data) { ... " 方法调用您“预加载”的 js 函数

希望对您有所帮助，问候。

试试这样的：

$(文档).ready(函数(){ $.ajax( 网址：'./your_script.php', 上下文：'文档'， ).done(函数(数据){ $('#your_div').html( 数据 ); your_js_function(); }) }); // ---- 主html 函数 your_js_function(){ alert('知道了！'); };

【讨论】：