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

Question

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

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

我还有哪些选择？

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

谢谢， 彼得罗

Answer 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 为“response”的标签中。

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

希望这对您有帮助！