加載其他頁面HTML頁面或DIV元素

好了，我想要的是加載主頁面內的HTML頁面，並顯示它的內容在主頁面DIV。我知道這可能與IFRAME，但尋找任何其他可能的解決方案。使用新版本的Firefox加載IFRAMES時遇到問題。內容不顯示，有些用戶報告問題。加載其他頁面HTML頁面或DIV元素

那麼最新的其他選項？ IFRAMES的好處在於其他頁面是分開加載的。因此，即使這個在IFRAME中加載的其他網站包含相同的CSS類等，所有內容也都應該顯示爲。那麼，IFRAMES有什麼好的選擇？

我不能JQuery的專家，但我發現這個選項：

$("#target_div").load("other_page.html");

看起來不錯，但如果這兩個網頁（父母other_page.html）包含在我的情況相同的CSS類，選擇等，然後「other_page.html」中的CSS正在生效。任何可能的解決方案（IFRAME旁邊）？

基本上我想顯示other_page.html HTML內容到父頁面div而不會導致CSS和其他頁面上的問題（父母和other_page）。

感謝您的建議！

來源

2013-08-21 StudioArena

順便說一句，如果沒有實際可行的解決方案，那麼也許任何人都知道如何將IFRAME不會導致問題與新Firefox等瀏覽器如果它在所有瀏覽器中都可用，Iframe是非常好的選擇。 – StudioArena

您需要從other_page.html中刪除與基本頁面衝突的css類。

最佳做法是不要將ajax頁面應用於css類（other_page.html是您的ajax頁面，因爲您通過jquery加載方法獲取它的內容）只能獲取頁面內容。在主頁上爲Ajax內容編寫所需的類。

這將解決您的問題

來源

2013-08-21 11:21:38 mujaffars

謝謝我理論上它應該如何處理CSS類等Iframes是非常好的選擇 - 容易，它做它應該唯一的問題是現在的瀏覽器支持。我希望有任何簡單的工作。掌握你的建議 – StudioArena

TL;博士：第

對於導入另一個文檔不應用從父文檔的CSS的子文檔，反之亦然有沒有比iframe更好的了。

如果你使用jQuery的load有page fragment - $("#target_div").load("other_page.html #some_id"); - 那麼你可以避開子頁面的CSS應用到父頁面（除非有一個無效的地方<style>元素） - 但這完全消除了子頁面的CSS（除了樣式屬性）並且不會停止父頁面的CSS應用到頁面。

使用<object data="foo.html"></object>將會產生與iframe類似的效果，但是瀏覽器支持較弱且JavaScript API不太一致。

使用完整框架將具有與iframe類似的效果，但需要僅包含框架的頂級框架集文檔。幀並不支持HTML 5

來源

2013-08-21 11:23:24 Quentin

謝謝昆汀。是的iframes很好，我同意最好的解決方案。瀏覽器支持是一個問題。就像我說過的，我希望任何簡單的工作。但不知道是否存在。我不是很熱衷於Jquery，所以我希望有任何可能的解決方案，但不知道現在:) – StudioArena

你應該使用兒童組合程序指定你的CSS：

body > div {…} /* affects only the div directly below the body tag */ 
body #target_div > div {…} /* affects the loaded content */

來源

2013-08-21 11:30:36 mcnesium

加載其他頁面HTML頁面或DIV元素

回答

相關問題