web-dev-qa-db-ja.com

iFrameの幅に合わせて外部Webサイトのコンテンツのサイズを変更します

2つのiFrameを含むWebページがあります。両方とも固定幅と高さです。内部に外部のWebサイトをロードしています。これらの外部Webサイトの幅をiFrameに合うように変更するにはどうすればよいですか（モバイルブラウザがビューポートを変更するように）。

javascripthtmlcssiframeweb
36
Tahin Rahman

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

例えば。

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
70
Luca

高さを変更する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」プレフィックスが必要です。プレーンページがある場合は、両方のページ（スクリプトとonload）の "if"と "frm"プレフィックスを削除できます。

リモート：

「実際の」ページの高さを達成するには、jQueryが必要です。 body.scrollHeightまたはrelatedを使用して高さを下げる（高さを低くする）ときにサイズの問題が発生するため、純粋な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）のデフォルトの高さは1ピクセルです。このスクリプトは、iframeから「メッセージ/イベントの待機」を挿入します。メッセージ（ポストメッセージ）を受信し、最初の3文字が "frm"の場合（前述の問題を回避するため）、4番目の位置から番号を取得し、「px」単位を含むiframeの高さ（スタイル）を設定します。

外部サイト（iframeにロード）は、「frm」とメインdivの高さ（この場合はid「master」）で親（オープナー）に「メッセージを送信」し​​ます。ポストメッセージの「*」は「任意のソース」を意味します。

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

2
Arvy