42

2 つの iFrame を含む Web ページがあります。どちらも幅と高さが固定されています。それらの中に外部のウェブサイトを読み込んでいます。これらの外部 Web サイトの幅を iFrame に合わせてサイズ変更するにはどうすればよいですか (モバイル ブラウザーがビューポートを変更して行うように)。

4

2 に答える 2

77

できることは、iframeに特定の幅と高さを設定し（たとえば、これらはウィンドウの寸法と同じである可能性があります）、スケール変換を適用することです。スケール値は、ウィンドウの幅とiframeに設定するサイズの比率になります。

例えば

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
于 2012-07-08T11:09:53.900 に答える
3

高さのサイズを変更する 1 つの Web サイトのヒント。ただし、2 つの Web サイトに変更できます。

これは、外部 Web サイトで iframe のサイズを変更するコードです。親 (iframe コードを使用) ページと外部 Web サイトにもコードを挿入する必要があるため、外部 Web サイトを編集するアクセス権がない場合、これは機能しません。

  • ローカル (iframe) ページ: コード スニペットを挿入するだけ
  • リモート (外部) ページ: 「body onload」とすべてのコンテンツを保持する「div」が必要です。また、ボディは「margin:0」にスタイル設定する必要があります

ローカル：

<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>

<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
  if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>

Twitter や Facebook プラグインなどの他の埋め込みコードの問題を回避するには、この "frm" プレフィックスが必要です。プレーン ページがある場合は、両方のページ (スクリプトとオンロード) の "if" と "frm" プレフィックスを削除できます。

リモート:

「実際の」ページの高さを達成するにはjQueryが必要です。body.scrollHeightまたは関連を使用して高さを下げる（高さを高くする）と問題が発生するため、純粋なJavaScriptを使用する方法を理解できません。何らかの理由で、常に最大の高さ (再調整済み) を返します。

<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>

したがって、親ページ (iframe) のデフォルトの高さは 1px です。スクリプトは、iframe から「メッセージ/イベントの待機」を挿入します。メッセージ（投稿メッセージ）が受信され、最初の 3 文字が「frm」である場合（上記の問題を回避するため）、4 番目の位置から番号を取得し、「px」単位を含む iframe の高さ（スタイル）を設定します。

外部サイト (iframe に読み込まれる) は、メイン div の "frm" と高さ (この場合は id "master") を使用して、親 (オープナー) に "メッセージを送信" します。postmessage の「*」は「任意のソース」を意味します。

お役に立てれば。私の英語でごめんなさい。

于 2014-05-14T19:16:06.027 に答える