框架的替代方案以包含来自不同服务器的内容答案

【问题标题】：alternatives to frames to include content from different servers框架的替代方案以包含来自不同服务器的内容
【发布时间】：2011-10-04 14:16:11
【问题描述】：

我需要制作一系列网页。每个都有一个来自网站的标题，以及来自我的 dropbox/public 中的 html 页面的内容。我简单的方法是使用框架，但它们已被弃用。

由于 html 内容的大小不同。所以 iFrame 似乎不是正确的工具。

我有什么选择？

似乎很多人在cmets ajax 中建议使用jsonp。不幸的是，我对这些方法完全陌生，所以我需要一个示例来复制然后使用。

谢谢，彼得罗

【问题讨论】：

jquery+ajax 可以用最简单的方式发挥作用。
很有趣，你能用我可以测试、投票和接受的代码来扩展你的建议吗？
您要从中提取的网站是否在您的域中？如果没有，我知道的唯一 HTML 方法是 iframe。查看这篇文章：snook.ca/archives/javascript/cross_domain_aj。如果它们在您的域中，请查看 jquery ajax $.load:api.jquery.com/load
它们在我的公共保管箱中，因此它们不在我的域中。感谢您的链接。
AJAX、JSONP 和回调函数可以很好地解决问题。

【解决方案1】：

您需要在主页中有 Jquery 库。将上面的代码复制到你的页面头部：

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

使用response id 创建一个div：

<div id="response"></div>

JQuery 有一个名为“load”的 AJAX 函数，该函数被附加到您希望加载页面的选择器中，在这种情况下，我们希望将文件“exemple.html”的内容加载到带有 id 的标签中“回应”。

<script>

$(document).ready(function(){
    // load exemple page when the page loads
    $("#response").load("exemple.html");
});

</script>

您还可以在单击主页的链接时加载内容：

<script>

$("#exemple").click(function(){
    // load exemple page on click
        $("#response").load("exemple.html");
    });

</script>

为此，您必须在 HTML 代码中添加带有 id="exemple" 的链接

<a href="#" id="exemple">Click to load the exemple page</a>

希望对你有帮助！

【讨论】：