將備用頁面內容加載到div onload中
[英]Load alternate page content into div onload
問題描述
我的項目是LAMP服務器上的團隊網站。 其中包括幾個針對不同年齡級別的“團隊頁面”。 我正在嘗試將“外部”內容（即，從我域中的另一個頁面）包含到特定的div中。我已經能夠成功使用iframe，但結果沒有響應，而且實在太難看了。
我已經找到了一些通過單擊或其他操作來調用AJAX內容的示例，但是我真的只需要在加載內容就可以了。
冒着太冗長的風險，我嘗試從外部加載此內容的原因是該內容與多個子頁面相關。 由於它不是靜態內容（本質上是一個帶有博客文章的簡單滑塊），所以我希望有一個可以更新的公共源文件，並使頁面自動包含它。
目前，我在每個團隊的頁面上都多余地擁有該輪播的代碼。 盡管不一定要破壞交易，但似乎不得不單獨更新7個不同的頁面，而不是更新可以在團隊頁面中調用的一塊代碼，這太違反直覺了。
當然，我缺少一些簡單的東西……任何建議都將不勝感激。
4 個解決方案
解決方案1
1 2015-10-05 18:53:17
使用jQuery的load方法應該相當簡單。 我能夠獲得一個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中，沒有問題
解決方案2
1 2015-10-05 18:59:20
$('#elementId').load('/partial/filename.html')
看一下jQuery的load函數。 允許您進行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”：以純文本形式返回HTML； 插入到DOM中時，將評估包含的腳本標簽。
“文本”：純文本字符串。
解決方案3
0 2015-10-05 18:52:39
如果您有權訪問數據庫，則可以查詢所需的數據並將其與頁面的其余部分一起輸出。 如果這不是一個選擇，則可以在加載時運行此jquery，它不必涉及單擊之類的事件。 沒有看到您的代碼，很難提供更完整的答案。
$.ajax({
url: "/pathtoajaxfile.php",
type: "get",
dataType: "html",
data: {"id" : "somepageid"},
success: function(data){
$("#myDiv").html(data);
},
error: function(e){
alert(e);
}
});
解決方案4
0 2015-10-05 18:56:14
您提到您在LAMP服務器上。 如果您的網頁是PHP，則可以制作一個包含您要使用的內容的文件，並將其包含在各個位置。 注意內容的路徑-根據您在網站中的位置，路徑可能會更改。 解決方案是讓您的“回收”內容使用指向其所需資源的絕對路徑。
在頁面加載時在div中加載內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.