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

我的项目是LAMP服务器上的团队网站。 包括几个不同年龄段的“团队页面”。 我正在尝试将“外部”内容(即,从我的域中的其他页面“包含到特定的div中。我已经能够成功使用iframe,但结果没有响应,而且老实说,非常丑陋。

我已经找到了通过点击或其他操作调用AJAX内容的示例,但是我真的只需要加载内容。

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

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

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

使用jQuery的加载方法应该相当简单。 我能够获取一个html文件,在我的本地服务器上加载另一个html文件的内容,执行以下操作:

index.html的:

      

contentToLoad.html:

 
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.

它将contentToLoad.html的内容加载到我的index.html onload中,没有任何问题

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文本或html。

“html”:以纯文本forms返回HTML; 包含的脚本标记在插入DOM时进行评估。

“text”:纯文本字符串。

如果您有权访问数据库,则可以查询所需的数据并将其与页面的其余部分一起输出。 如果这不是一个选项,你可以运行这个jquery onload,它不必涉及像点击这样的事件。 如果没有看到您的代码,就很难提供更完整的答案。

 $.ajax({ url: "/pathtoajaxfile.php", type: "get", dataType: "html", data: {"id" : "somepageid"}, success: function(data){ $("#myDiv").html(data); }, error: function(e){ alert(e); } }); 

你提到你在LAMP服务器上。 如果您的页面是PHP,您可以创建一个包含您要使用的内容的文件,并将其包含在您希望拥有它的各个位置。 请注意内容路径 – 根据您在网站中的位置,您的路径可能会发生变化。 解决方案是让您的“回收”内容使用绝对路径来获取所需的资源。