Question

我的项目是LAMP服务器上的团队网站。包括几个＆＃34;团队页面＆＃34;适合不同年龄段。我试图包括＆＃34;外部＆＃34;内容（即，从我的域名中的另一个页面＆＃34;到特定的div。我已经能够成功使用iframe，但结果没有响应，老实说，非常难看。

我找到了通过点击或其他操作调用AJAX内容的示例，但是我真的只需要在加载时将内容放在那里。

冒着过于冗长的风险，我试图在外部加载此内容的原因是内容与多个子页面相关。由于它不是静态内容（本质上是一个带有博客帖子的简单滑块），我希望有一个可以更新的公共源文件，并让页面自动包含它。

目前，我在每个团队的页面中都冗余地提供了这个轮播的代码。虽然它不一定是一个交易破坏者，但它必须单独更新7个不同的页面，而不是更新可以调用到团队页面的一个代码块，这似乎是违反直觉的。

当然，我错过了一些简单的东西...非常感谢任何建议。

Answer 1

使用jQuery's load method应该相当简单。我能够得到一个html文件，在我的本地服务器上加载另一个html文件的内容，执行以下操作：

的index.html：

<!DOCTYPE html>
<html>
    <head lang="en">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="loadedContent" />
    </body>
    <script>
        $('#loadedContent').load("contentToLoad.html"); <!-- loads other page's content -->
    </script>
</html>

contentToLoad.html：

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

它将contentToLoad.html的内容加载到我的index.html onload而没有问题

Answer 2

http://api.jquery.com/load/

$('#elementId').load('/partial/filename.html')

查看jQuery的加载函数。允许您进行ajax调用以从外部源拉取html并将其加载到元素。（相同的原产地规则仍然适用）

其他选项是使用jQuery的ajax函数。成功加载带有返回数据的元素。

http://api.jquery.com/jquery.ajax/

$.ajax({
       url: "/partial/filename.html",
       type: "get",
       dataType: "text",
       success: function(data){
         $('#elementId').html(data);
       }
    });

根据您加载的数据，您可能需要使用dataType text或html。

“html”：以纯文本形式返回HTML;包含的脚本标记被评估   插入DOM时。

“text”：纯文本字符串。

Answer 3

你提到你在LAMP服务器上。如果您的页面是PHP，您可以创建一个包含您要使用的内容的文件，并将其包含在您希望拥有它的各个位置。请注意内容路径 - 根据您在网站中的位置，您的路径可能会发生变化。解决方案是为您的＆＃34;再循环＆＃34;内容使用绝对路径到它需要的资源。

将备用页面内容加载到div onload中

3 个答案: