2017-05-12 69 views
-2

Isn't work
我試過在Isn't work某種程度上,我不能conrectlly在b.html顯示homePage.html。而我可以在Chrome獨秀homePage.html。 我有jquery-3.2.1.min.js。這裏是我b.html如何包含另一個HTML文件內容

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="jquery-3.2.1.min.js"></script> 
     <script> 
     $(function(){ 
     $("#includedContent").load("homePage.html"); 
     }); 
     </script> 
    </head> 
    <body> 
     <div id="includedContent"></div> 
    </body> 
    </html> 

任何建議將不勝感激。

回答

0

您可以使用w3-include

<!DOCTYPE html> 
<html> 
<script src="https://www.w3schools.com/lib/w3data.js"></script> 

<body> 

<div w3-include-html="content.html"></div> 

<script> 
w3IncludeHTML(); 
</script> 

</body> 
</html> 

或者PHP

<html> 
<body> 

<div class="menu"> 
<?php include 'menu.php';?> 
</div> 

<h1>Welcome to my home page!</h1> 
<p>Some text.</p> 
<p>Some more text.</p> 

</body> 
</html> 

還有其他的方法也一樣,我只是包括兩項。

+0

你已經試過我提供的代碼了嗎?你能詳細說明不工作嗎?出現任何錯誤? – Swellar

+0

標籤可以顯示一些東西,但是它仍然沒有顯示正確的樣式 – wylasr

+0

什麼''?我問你是否已經嘗試了我提供的代碼 – Swellar

0

包含HTML模板與我們包含樣式表的方式類似,我們使用標籤。但不是使用rel = stylesheet,而是使用rel = import添加鏈接標記。作爲一個例子,在這裏我將包括一個名爲template.html

<link rel="import" id="template-file" href="template.html"> 

要附加在文件中的內容模板,我們可以在身體內添加腳本。另外,爲了使這個腳本能夠工作,我們必須把它放在rel = import之後。因爲我們應該確保rel = import中的內容已經被腳本之前的瀏覽器完全加載了,所以腳本能夠識別元素,元素的id或該文件中的類。

首先,我們用這段代碼選擇模板文件。

var getImport = document.querySelector('#template-file'); 

然後,我們需要獲取內容:

var getContent = getImport.import.querySelector('#content'); 

現在我們可以添加使用JavaScript appendChild()方法體中的內容。

document.body.appendChild(document.importNode(getContent, true)); 

內容現在應該出現在主文件中。

+0

無論如何,謝謝,雖然這不起作用。沒有改變。 – wylasr

0
$("#includedContent").load("homePage.html", function(responseTxt, statusTxt, xhr){ 
     if(statusTxt == "success") 
      alert("External content loaded successfully!"); 
     if(statusTxt == "error") 
      alert("Error: " + xhr.status + ": " + xhr.statusText); 
    }); 

用這個代替,看看你是否收到任何錯誤。

相關問題