如何通过ajax从SPA获取完整的html？

Posted 2023-03-05

【中文标题】如何通过ajax从SPA获取完整的html？

【英文标题】：How to get full html from SPA by ajax?

【发布时间】：2016-02-07 10:45:15

【问题描述】：

我正在尝试在 AngularJS 中完成由 SPA 生成的完整 html。

            $.get('http://localhost:3388/' + d.response.path, function (d) 
                $('#templateContainer').html(d);
            );

但它只重新调整了基本的 html 结构，而不是 SPA 中由 AJAX 生成的动态 html（我想知道这是否是 SPA 不适合 SEO 的原因）。

我相信可能存在一些技术/技巧来解决这个问题。例如，当您检查元素时，Chrome 能够从 AJAX 呈现所有 html。

也许我在 google 上使用的关键字不正确。人们一直在做什么来解决这个问题？

更新：

只是想清楚我的情况。我正在尝试从此 SPA 获取完整的 html，以向用户显示模板预览。

我有许多带有不同模板的不同 SPA。我想通过 AJAX 而不是 IFRAME 显示这些实时模板。使用 IFRAME 可以，但效果不佳。

【问题讨论】：

您获得的 ajax 响应应该由您的 SPA 直接处理成为您的完整页面，并且应该由 SPA 而不是通过简单的 ajax 请求加载。

你试过$('html').html();吗？

现在我不会三思而后行。如果您没有选择并且必须在这种情况下渲染 SPA，我会直接在 SPA 端实现 s-s-r。

【参考方案1】：

您将获得 原始 html，因为服务器不会呈现您的应用，这是预期的行为，没有错误。

S.P.A通常是客户端应用程序，这意味着浏览器必须在运行时渲染AngularApp！

当然，浏览器不会渲染任何内容，因为您的代码是异步注入到 dom 中的，因此，您需要手动编写 AngularJS 引导程序，而不是通过 ng-app 指令。

顺便说一句，有很多方法可以让你的应用在服务器端呈现，看看https://prerender.io/...

如果您的目标是拥有良好的索引...通过 jQuery 加载应用程序是一个糟糕的解决方案，因为搜索引擎爬虫无法处理 javascript，这不是特定于角度的问题，每个用javascript构建的应用程序都有这个问题。

最好的解决方案应该是拥有一个完整的 angular-app，并且只针对爬虫，实现服务器端预渲染（使用 prerender.io）。

希望有所帮助！

【讨论】：

“当然浏览器不会渲染任何东西，因为你的代码是异步注入到 dom 中的，所以，你需要手动编写 AngularJS 引导程序，而不是通过 ng-app 指令。”...一个很好的提示。稍后我会尝试并通知您。

【参考方案2】：

您可以在 SPA 中生成完整页面，但这不是您在这种情况下不应该使用 SPA 的目标。

因为 SPA 的目标是只获取页面的一部分并在必要时加载它们，如果您关心像 prerender.io 这样的 SEO 爬虫，您应该尝试使用中间件，您可以使用它创建自己的服务器或使用他们的服务它的开源。

但是在 SPA 中生成一个完整页面会扼杀您应该使用 SPA 的所有原因。最好的问候:)