0

私が望むのは、メインページ内の HTML ページの外側をロードし、メインページの DIV 内にそのコンテンツを表示することです。IFRAME でこれが可能であることはわかっていますが、他の可能な解決策を探しています。新しいバージョンの Firefox では、IFRAMES の読み込みに問題があります。コンテンツが表示されず、一部のユーザーから問題が報告されています。

それで、他のオプションは何ですか？IFRAMES の良いところは、他のページが個別に読み込まれることです。したがって、IFRAME に読み込まれているこの他の Web サイトに同じ CSS クラスなどが含まれていても、すべてが正常に表示されます。それで、IFRAMESに代わる良いものはありますか?

私は本当にJQueryの専門家ではありませんが、次のオプションを見つけました：

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

良さそうに見えますが、両方のページ (parent と other_page.html) に同じ CSS クラス、セレクターなどが含まれている場合、私の場合は「other_page.html」の CSS が有効になります。可能な解決策はありますか (IFRAME 以外)?

基本的に、other_page.html HTML コンテンツを親ページの div に表示したいのですが、両方のページ (parent と other_page) で CSS やその他の問題を引き起こすことはありません。

ご提案いただきありがとうございます。

4

3 に答える 3

1

tl;dr : いいえ。

親ドキュメントから子ドキュメントに、またはその逆に CSS を適用せずに別のドキュメントをインポートするには、iframe に勝るものはありません。

ページ フラグメントでjQuery を使用するloadと— — 子ページの CSS が親ページに適用されないようにすることができますが (要素が無効な場所にない限り) — ただし、これにより子ページの CSS が完全に削除されます (スタイル属性を除く)。親ページの CSS がページに適用されるのを止めません。$("#target_div").load("other_page.html #some_id");<style>

を使用<object data="foo.html"></object>すると、iframe と同様の効果がありますが、ブラウザーのサポートが弱く、JavaScript API の一貫性が低くなります。

フル フレームを使用すると、iframe と同様の効果が得られますが、フレームのみで構成されるトップ レベルのフレームセット ドキュメントが必要です。フレームは HTML 5 ではサポートされていません。

于 2013-08-21T11:23:24.477 に答える
0

子コンビネータを使用して CSS を指定する必要があります。

body > div {…} /* affects only the div directly below the body tag */
body #target_div > div {…} /* affects the loaded content */
于 2013-08-21T11:30:36.540 に答える
0

ベースページと競合している other_page.html から css クラスを削除する必要があります。

ベスト プラクティスは、ajax ページに css クラスを適用しないことです (other_page.html は、jquery ロード メソッドによってコンテンツを取得するための ajax ページです)。ページ コンテンツのみを取得します。メイン ページでは、Ajax コンテンツに必要なクラスを記述します。

これで問題が解決します

于 2013-08-21T11:21:38.007 に答える