5

別のウェブサイトのWordPressページにウェブサイトを埋め込みたい。

iframed Webサイトはaspの連絡フォーム処理ページであり、応答しません。

これをレスポンシブなdivタグでラップできますか、それともiFrameをレスポンシブにすることができますか？

ありがとう。

4

4 に答える 4

5

iframeを何に反応させたいかによって異なります: 包含ブロックの変更またはiframe内のコンテンツの変更。

iframe を含むブロックのサイズに適応させたい場合 (ユーザーがブラウザー ウィンドウのサイズを変更するなど)、パーセンテージ値を使用して相対的な寸法をiframe要素に追加することができます。たとえば、スタイルシートを使用します。

html,body {
    height:100%;
}

iframe {
  width:80%;
  height:80%;
}

これが機能するには、 htmlとbodyを 100% の高さに設定する必要もあります。理由は聞かないでください :-) しかし、この魔法は機能します。

例: http://jsfiddle.net/4z2hn/

私の個人的な意見を追加したいと思います。できれば、レイアウトの問題を解決するために JavaScript を使用しないでください。そのためには、代わりに CSS を使用してください。現在の CSS 実装の力により、スタイルの柔軟性が可能になり、以前は利用できなかったデザインの可能性が提供されます。他のすべてが失敗した場合にのみ、スクリプト化されたソリューションに頼ってください。

于 2014-02-19T09:40:06.883 に答える
2

お問い合わせフォームの ASP ページにある要素がわからない。

jquery経由でサイズ変更する方法を試すことができます。fromブラウザを小さくするときにiframeの自動サイズ変更を作成するにはどうすればよいですか?

$(window).resize(function() {
  $('IFRAME').width($(window).width());
});

または、他の方法を使用してください。

ウィンドウのサイズ変更時に iframe の幅を変更する

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

サイズ変更が実際にどれだけうまく機能するかは、フレーム内のコンテンツによって異なります。しかし、それは始まりです。

于 2012-12-13T07:00:21.433 に答える
-1

自分のページでない場合、iframe コンテンツをレスポンシブにすることはできません。iframe スタイルを追加できます

iframe {
  width: 100%;
}

iframe ラッパーをレスポンシブにします。しかし、その中のコンテンツは - 以前と同じになります - (私が言ったように - それがあなたのページでもない限り)

于 2013-09-04T08:37:56.933 に答える