嵌入JS和HTML同時失敗

我想擁有一個類型的許多HTML頁面，唯一的區別是頁面標題和一些數據存儲在不同的.json文件中。其他一切應該存儲在兩個集中的文件中，一個.js和一個.html文件。在僞代碼的網頁應該是這樣的：嵌入JS和HTML同時失敗

<html> 
<head> 
include global_script.js 
include specific_data_n.json 
</head> 
<body> 
include global_body.html 
</body> 
</html>

在第n頁包括數據文件specific_data_n.json但一切始終是相同的。

我知道如何在頭文件中包含.js和.json文件。但是，我真的不知道如何在文本中包含.html文件。我在網上搜索，特別是，發現了這個問題：Server side includes alternative我嘗試了包括在答案中提出的身體不同的方式，但無論我嘗試，我得到一個JS錯誤。

這是一個問題的最小例子。首先，工作文件，其中身在主文件和不在一個額外的文件：

function init(){document.getElementById('demo').innerHTML = '2+2=4';}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head> 
 
    <script language="javascript" type="text/javascript" src="minimal.js"></script> 
 
    </head> 
 
    <body onload="init();"> 
 
     
 
    <div id="demo"> 
 
    2+2=5 
 
    </div> 
 
     
 
    </body> 
 
    </html>

現在我試圖把身體外部文件下面一個上面提到的問題的答案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script language="javascript" type="text/javascript" src="minimal.js"></script> 
</head> 

<body onload="init();"> 
    <!-- Content, inclusion from https://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file --> 
    <div w3-include-html="body_minimal.html"></div> 
    <script> 
(function() { 
    myHTMLInclude(); 
    function myHTMLInclude() { 
    var z, i, a, file, xhttp; 
    z = document.getElementsByTagName("*"); 
    for (i = 0; i < z.length; i++) { 
     if (z[i].getAttribute("w3-include-html")) { 
     a = z[i].cloneNode(false); 
     file = z[i].getAttribute("w3-include-html"); 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
      a.removeAttribute("w3-include-html"); 
      a.innerHTML = xhttp.responseText; 
      z[i].parentNode.replaceChild(a, z[i]); 
      myHTMLInclude(); 
      } 
     }  
     xhttp.open("GET", file, true); 
     xhttp.send(); 
     return; 
     } 
    } 
    } 
})(); 
</script> 
</body> 
</html>

幷包含在body_minimal.html：

<div id="demo"> 
2+2=5 
</div>

我也試過嵌入body_minimal.html文件不同的進一步方法（其中如果需要的話我可以提出），但他們沒有工作，所以我認爲這是一個根本性的問題。我總是得到錯誤的JS調試器：

TypeError: document.getElementById(...) is null

我要補充一點，我沒有經驗，無論是在HTML也不在CSS和我大多來自不同的教程，論壇和Q &一個網站，所以複製&粘貼的東西我真的不明白這個嵌入HTML文件的代碼在做什麼。 :)

感謝您提供什麼問題可能會和新年快樂！

來源

2016-12-31 Photon

這確實屬於評論，但不幸的是我的帳戶是新的，所以我不被允許...答案將不得不做。

如果您的網絡主機運行PHP，我建議尋求PHP包括，它們更簡單。

基本上，您會在中央的HTML文件保存爲.php文件，而不是，包括你想使用

<?php

include 'global_body.html';

?>

來源

2016-12-31 19:36:24 seport

感謝您的建議！不幸的是，該網站託管在github.io上，它不提供PHP支持。 – Photon

@Photon - 試試你鏈接到的問題中評分較高的答案之一。 – Quentin

實際上，最高評分答案的作用最差，它只顯示 {％include head.html％} {％include minimal_body.html％} 作爲輸出。其他的也導致我的問題中提到的JS錯誤... – Photon

的HTML文件中找到一個解決方案看起來很愚蠢，但正如你所知道的，如果某些東西看起來很愚蠢但是起作用，那並不愚蠢。 :)我剛剛做了另一個.js文件，它通過文檔寫入正文內容。寫（）：

<!DOCTYPE html> 
<html> 
<head> 
<script language="javascript" type="text/javascript" src="script.js"></script> 
</head> 
<body> 
<script language="javascript" type="text/javascript" src="body.js"></script> 
</body> 
</html>

和包含的.js文件：

//body.js 
document.write('<div id="demo"->2+2=5</div>');

和

//script.js 
document.getElementById('demo').innerHTML = '2+2=4';

唯一的問題是，在真實的場景中的正文的內容很多行和JS需要每個換行符都有一個反斜槓。此外，從JS的角度來看，語法高亮僅顯示一種顏色的所有HTML代碼，它只是一個字符串。因此，我仍然對更好/更清潔的解決方案感興趣！

來源

2017-01-01 12:44:07 Photon

嵌入JS和HTML同時失敗

回答

相關問題