0

私の Web アプリケーションでは、別のドメインから HTML ページを取得するクロスドメイン ajax 呼び出しを作成しました。この新しくフェッチされたページは、次のコードを使用して jQuery ダイアログでレンダリングされています$('#previewDialog').html(response).dialog('open'); 。これにより、ダイアログで応答が適切にレンダリングされます。ただし、応答 (HTML ページ) にもいくつかの CSS スタイルが含まれています。これらのスタイル (通常は BODY、INPUT など) がメイン ウィンドウ (親ページ) に適用され、ページの全体像が歪んでいます。

HTML ページのダイアログが開くと、すべてのコンポーネントに適用される HTML ページ (AJAX 呼び出しの応答) で使用される CSS が原因で、親ページのビューが完全に歪んでしまいます。ダイアログを閉じると、親ページが元の形に戻ります。

とにかく、ダイアログに表示されている HTML ページの CSS が親ページに適用されないようにすることはできますか?

4

1 に答える 1

0

些細な答え: プルしたページのすべてを、他の場所で使用されていないクラスを持つ div でラップします。そのページの .css を変更して、そのクラスの div 内の要素にのみ適用されるようにします。

編集: 元のページの css を制御できない場合、事態はやや複雑になります。ただし、問題は、HTML (css リンクを含む) をページに直接挿入していることです。代わりに、次のことを試してください。

  • 他のページの HTML を取得します。html() コマンドを使用して、他に使用していない側の div に配置します。
  • jquery DOM コマンドを使用してその div に移動します。問題のあるリンクの内側のページの部分をつかみ、その場所に引っ張り$('#previewDialog')ます。作業スペース div の内容を破棄します。保持する必要がある JavaScript または CSS がある場合は、ページの別の場所に入力します (必要に応じて、div ラッパーのように変更します)。

現在、これは、フィードされているページの css または javascript が頻繁に変更されていない場合にのみ機能します。

同じことの代替バージョン - 応答 (文字列形式) として持っている間、DOM コマンドを使用して必要なものを引き出すのではなく、文字列操作ツールを使用して css 参照を削除します。

同じことのより複雑/難しいバージョン (やや堅牢ですが): 文字列コマンドを使用して css 参照を切り出し (代替バージョンと同様)、その css 参照を使用して別の呼び出しを行い、.css ファイルを取得します。.css ファイルで文字列コマンドを使用して、最初に説明したように div-wrapper 制限を追加してから、内部スタイル シートとしてページの別の場所に挿入します。

于 2012-08-23T13:01:17.693 に答える