動態加載本地HTML頁面上的內容

上下文：
基本上，我附上了一個小的HTML幫助文檔去與我的程序（不意味着在服務器上，本地查看）。 HTML只是因爲我在製作文檔時感到非常自在，但我也希望它具有一些我不能在PDF或其他內容中實現的交互/動態內容。動態加載本地HTML頁面上的內容

當您點擊一個鏈接而不是讓每個頁面都需要它自己的HTML頁面時，我會動態替換內容，這只是我習慣於這樣做的事情，我可以更改菜單和橫幅以及其他任何內容一個單獨的'main'html文件，無需爲共享內容中的一個微小更改而調整每個其他html文件。

當前方法：
現在它都是通過JavaScript和jQuery完成的。當用戶點擊一個鏈接時，我使用jQuery的load（）函數加載適當的內容（一個html文件），並用加載的html文件中的內容替換內容div。目前只使用相對鏈接。例如。核心功能是類似下面的東西：

$("#ContentBox").load("content/faq.html");

這實際工作在幾個星期前，當我第一次寫的。這並不像我構建整個事物，直到現在纔對其核心概念進行測試。但現在看來所有的瀏覽器都在阻止它。 Chrome的說：

XMLHttpRequest cannot load file:///C:/[....]/content/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. `

問：
所以我理解爲什麼它的發生，因爲它是一個潛在的安全風險，以允許，我只是想弄清楚它周圍的一個很好的方式，還是我想要做什麼（如果這是可能的）。我的意思是我可以將所有內容預加載爲javascript文件中的大字符串變量，或者作爲隱藏的div打開和關閉，但我希望更優雅一些。

我不能指望我的程序的所有用戶都設置本地Web服務器來查看幫助文檔。

我已經考慮過File和FileReader類，但它們需要用戶輸入很多功能。還有iFrames，但它引入了各種奇怪的東西，需要考慮，我討厭iFrames。

來源

2014-11-05 wowohweewah

如何[當前答案]（http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-but-im-loading-a-co）不幫你？ – Jonast92 2014-11-05 22:38:16

這就像你沒有讀過我的問題。所有的解決方案都能正常工作，但對於普通用戶只需打開幫助文檔無法預期。安裝網絡服務器，向chrome添加參數，python .. – wowohweewah 2014-11-05 22:41:34

如果您已經知道這些問題，那麼這個問題本身就太寬泛了。沒有人能告訴你最好的方法是什麼。服務器託管便宜 – charlietfl 2014-11-05 22:54:30

如果您的幫助文檔只能在Windows計算機上查看，您應該考慮使用HTML應用程序來擺脫交叉來源問題。或者您可以通過將隱藏的textareas中的所有源代碼文件合併來解決此問題。我已經完成了大聲笑

來源

2014-11-05 23:29:00

對任何人仍然感興趣這是我現在解決的解決方案。在機身的結束都與風格，像這樣不同的網頁內容的div：

<div id='PageName' class='content-div'> 
    <!-- content goes here --> 
</div> 

<div id='AnotherPage' class='content-div'> 
    <!-- content goes here --> 
</div>

id是重要的，因爲這將成爲網頁的名稱和類型，您可以命名什麼的，我用於隱藏visibility:hidden;以及給它絕對定位在0,0 - 以防萬一 - 以便它們不與其他元素交互和擰緊佈局。

在頁面加載以及一堆其他函數中，我將這些元素按頁面名稱存儲到JavaScript關聯對象中。

var content = {}; 

function onLoadThisGetsCalledSomewhere() { 
    // loop through all of those divs 
    $(".div-content").each(
     function() { 
      // using $(this) to grab the div in the scope of the function here 
      var element = $(this).element; 
      var name = $(this).attr('id'); 
      // remove it from the html (now it exists only in the content object) 
      element.detach(); 
      // remove that style class that makes it invisible 
      element.removeClass('content-div'); 
      // put it into memory 
      content[name] = element; 
     } 
    ); 
}

所以被點擊到其他頁面的鏈接時，的onclick確實像switchPage(pageName)讓我們說。

function switchPage(requestedPage) : 
    // somewhat simplified, real version has case and null checks that take you to 404 page 
    var contentElement = content[requestedPage]; 
    // replace content in some container div where you want content to go 
    $("#TheContentContainer").empty().append(contentElement); 
    // have to adjust size (width possibly too but I had a fixed width) 
    $("#TheContentContainer").height(contentElement.height()); 
}

我不是在同一臺計算機上，所以我寫這一切了新生活，不要複製/粘貼所以有可能會出現一些錯誤/錯別字（買者自負 - 我會解決它明天）。我使用的版本也有些複雜，因爲我有子頁面以及動態處理的菜單欄更改。還有一些功能，以便您可以在新窗口/選項卡中正確打開「鏈接」，如果這樣做的話。但現在這不重要。

這不是太不同，我想用隱藏的div（這裏的好處是detach（）函數將它從html中移除）或者只是在java vars中存儲長字符串的html代碼（比這更可讀）但我認爲它的優點是更清潔（恕我直言），到目前爲止我喜歡它。一個缺點是有很多頁面你會得到一個巨大的HTML文檔，這可能會讓編輯一個特定的頁面變得非常痛苦，但是任何體面的編輯器都應該有一個書籤功能，以使它更容易到達你所在的行尋找。如果不是本地的話，這也是一個糟糕的主意，但如果它在線的話，只需使用jQuery的load（）函數即可。

來源

2014-11-06 04:41:24 wowohweewah

如果這是所有本地內容，那麼你不應該通過ajax加載它。您可以選擇的一種選擇是將您的幫助文件設置爲本地JavaScript模板。然後，您可以參考他們使用模板庫像鬍鬚或下劃線，並鏈接到他們在您的應用程序，像這樣：

<script type="text/template" src="local/helpfile.js" />

如果你不想使用模板庫，然後你可以設置helpfile.js作爲JSON數據，但您需要首先轉義引號字符。

來源

2014-11-06 04:57:27 IcedDante

動態加載本地HTML頁面上的內容

回答

相關問題