使用Javascript獲取本地HTML文件的HTML代碼

我正在開發一個帶有HTML，CSS，Javascript，JQuery和JQTouch的小應用程序。使用Javascript獲取本地HTML文件的HTML代碼

這是一個LOCAL應用程序。我有一個div的index.html。當我點擊這個文件中的鏈接時，我想加載page1.html（同一文件夾）的HTML代碼，並將index.html的div插入到我想要的page1.html標籤中。

示例：將（page1.html）的內容注入（index.html）。

我嘗試：http://api.jquery.com/load/

$('#loadContent').load('page1.html #test');

而且loadContent的內容不會改變。我包括JQuery腳本到index.html ...

我也嘗試http://api.jquery.com/html/，但我認爲它連接到服務器。

有什麼想法？謝謝！

來源

2011-12-13 Josue

你仍然需要在Web服務器上運行這一目的（例如本地主機），因爲它使用的XMLHttpRequest從服務器加載數據「從服務器加載數據，並把返回的HTML到匹配的元素。」 – Dve

聽起來像這樣的問題是，當您在localhost上運行時，jQuery庫不會被加載，或者AJAX請求由於相同的原因而失敗。這是由於內置在瀏覽器to prevent cross-site scripting中的保護。

從the documentation for load看到這個「額外注」：

由於瀏覽器的安全限制，大多數「Ajax」的請求都受到同源策略;該請求無法成功從不同的域，子域或協議中檢索數據。

如果您使用任何AJAX，您將不得不在本地Web服務器上運行它。在這種情況下，您應該從本地Web服務器而不是文件系統運行此頁面。那麼你將不需要任何解決方法。

如果你在Windows上，你可以use UniServer。

如果您不打算使用任何AJAX（不使用load），那麼您可以編寫代碼，以便在遠程版本未加載時回退到本地版本的jQuery。

這裏有一個如何，grabbed from this page一個例子：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script>!window.jQuery && document.write('<script src="/Scripts/lib/jquery/jquery-1.4.4.min.js"></script>'))</script> 

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
<script>!window.jQuery.validator && document.write('<script src="/Scripts/lib/jquery/jquery.validate.min.js"></script>')</script> 

<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script> 
<script>!window.jQuery.validator.unobtrusive && document.write('<script src="/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js"></script>')</script>

來源

2011-12-13 09:11:25

大多數瀏覽器將默認，阻止此本地文件系統作爲安全預防措施上。你在遠程服務器上試過了嗎？

來源

2011-12-13 09:11:56 landons

或者您可以運行本地服務器。如果你有python，你可以到文件目錄下運行python -m SimpleHTTPServer for python 2.7或python -m http.server for python 3.x

來源

2011-12-13 09:17:34 Max

只是保持簡單http://www.wampserver.com/en/ – Shea

同樣適用於Node.js;用'npm'安裝'http-server'，然後從任何地方運行'http-server'。 – bennedich

@andrewjackson，我不認爲安裝wampserver比在命令提示符下運行1行更簡單。但是，很多人對命令提示符和瀏覽目錄感到不舒服，所以我猜wampserver也是一個很好的建議。 – Max

我對jQuery不太瞭解。但是，您仍然可以通過將page1.html加載到隱藏的iframe中，然後獲取此頁面的document.body.innerHTML，然後將該節點附加到您需要的div上。它只有JavaScript中的HTML DOM。

但是在性能基礎上，加載iframe總是代價昂貴的。這會做你的工作。但是，在jQuery或其他庫中可能有很多解決方案，對不起，我不太瞭解它。

來源

2011-12-13 09:24:39 Kris

確保在創建loadContent之後調用它。當準備寫入文檔時，以下內容將運行您的加載代碼。

$(function() { 
$('#loadContent').load('page1.html #test'); 
});

來源

2011-12-13 09:24:55 Shea

它不起作用... – Josue

有人說，XMLHttpRequest必須與HTTP Web服務器一起使用。我建議安裝WAMP，安裝並配置Apache，PHP和Mysql。如果你能夠對本地文件進行Ajax調用，這將是一個巨大的安全缺陷。 – Shea

使用Javascript獲取本地HTML文件的HTML代碼

回答

相關問題