javascript - jQuery、ajax、在其他页面内显示页面(如 iframe)

标签 javascript jquery ajax iframe

我需要在一个页面中显示一个页面,就像一个 iframe,但使用的是 jquery。这些页面不在同一台服务器上。

主页是 cms 中的 html 页面,需要嵌套的页面是位于另一台服务器上的包含图像或音频文件列表的媒体页面。媒体页面上的高度会有所不同,所以我有点想远离 iframe...在 jquery 中是否有一个简单的调用可以像 iframe 一样抓取页面...或者如果打开 js 会降级为 iframe在浏览器级别关闭?

谢谢。

最佳答案

除非您的外部内容是从与您的主网站相同的域提供的,否则使用 AJAX 进行此类操作并不容易,因为您会遇到 same origin policy .

解决同源策略的一个解决方案是设置一个简单的 reverse proxy在服务器上,这将允许浏览器为 AJAX 请求使用相对路径,而服务器将充当任何远程位置的代理。

如果使用 mod_proxy在 Apache 中,设置反向代理的基本配置指令是 ProxyPass。它通常按如下方式使用:

ProxyPass     /external/     http://other-domain.com/

在这种情况下,浏览器将能够请求 /external/index.html 作为相对 URL,但服务器将通过充当 http:/的代理来提供服务/other-domain.com/index.html.

然后在您的 JavaScript 中,您将能够使用 jQuery load()方法如下:

$('#your_div').load('external/index.html');

另一种选择是使用 iframe,并使用 JavaScript 动态调整其高度。您可能需要查看以下 Stack Overflow 帖子以进一步阅读此主题:

您可能还想考虑一个完整的服务器端解决方案,如 @Yi Jiang在上面的评论中建议。在将 HTML 提供给客户端浏览器之前,您可以将来自外部站点的 HTML 注入(inject)到您的主站点中。

关于javascript - jQuery、ajax、在其他页面内显示页面(如 iframe),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3485958/

相关文章:

javascript - 为什么我的 onClick 事件不起作用?

javascript - 我无法使用 javascript 通过 ajax 将内容发布到 php

javascript - 我如何知道 location.reload() 何时完成?

javascript - Angular 1.6 错误 : [$injector:modulerr]

javascript - 加载时出现返回顶部按钮

javascript - 如何使用ajax正确地将json发送到RestController?

javascript - Jquery Ajax .load() 不起作用

javascript - 获取要传递给 POST 的选择值

javascript - 替换 dojo/dijit TabContainer 中特定选项卡的内容?

javascript - 从 jQuery 中获取 JSON - 从 Foursquare API