iFrameの幅に合わせて外部ウェブサイトのコンテンツをサイズ変更

私はそれに2つのiFramesを持つウェブページを持っています。どちらも固定幅と高さです。私はそれらの内部に外部のウェブサイトを読み込んでいます。 iFrameに合わせて外部ウェブサイトの幅を変更するにはどうすればよいですか（モバイルブラウザはビューポートを変更するなど）iFrameの幅に合わせて外部ウェブサイトのコンテンツをサイズ変更

出典

2012-07-08 Tahin Rahman

これは不可能なIMHO [これを参照]（http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-iframe）。 –

返事をありがとう。 –

あなたは歓迎です:-) –

あなたのできることは、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-08 11:09:53 Luca

+1、本当にいいですが、クロスブラウザソリューションではないかもしれません！ –

trueですが、クロスブラウザソリューションの定義によります。 AFAIKそれはIEで動作する必要があります> 8 – Luca

それは私のために完全に働いた。ありがとう.... :) –

-1

IFrameの内部では、ブラウザは別のページにあるかのようにWebサイトのページを自動的にレンダリングします。たとえば、ブラウザのサイズを変更した場合と同じように動作します... Webページは設計どおりに表示されますそれが固定された次元の流体設計であろうとなかろうと、あなたはサイト上で異なるレンダリング動作を強制することはできません。ただし、ページのマークアップをプログラムによって変更することはできます。

出典

2012-07-08 11:06:37 AhHatem

ヒント高さを変更するウェブサイトのヒント。しかし、あなたは2つのウェブサイトに変更することができます。

ここに私のコードは、外部のウェブサイトでiframeのサイズを変更することです。親（iframeコード付き）ページと外部ウェブサイトにコードを挿入する必要があります。そのため、外部ウェブサイトを編集するアクセス権がない場合は機能しません。

ローカル（インラインフレーム）ページ：ちょうど

リモート（外部）ページをコードスニペットを挿入します。あなたは、「身体のonload」とすべての内容を保持している「DIV」が必要です。あなたはTwitterやFacebookのプラグインのような他の埋め込まコードの問題を回避するために、この「FRM」接頭辞を必要とする

<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>

：ローカル

：と体が「0余白」にスタイリングする必要があります。プレーンページがある場合は、両方のページ（スクリプトとオンロード）で "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）のデフォルトの高さは1pxです。スクリプトはiframeから「メッセージ/イベントの待機」を挿入します。メッセージ（投稿メッセージ）が受信され、最初の3文字が "frm"（上記の問題を避けるため）の場合、4番目の位置から番号を取得し、 'px'単位を含むiframeの高さ（スタイル）を設定します。

外部サイト（iframeに読み込まれます）は、 "frm"とメインdivの高さ（この場合は "master"というID）を持つ親（オープナー）に "メッセージを送信"します。ポストメッセージの「*」は「任意のソース」を意味します。

これが役に立ちます。私の英語のために申し訳ありません。

出典

2014-05-14 19:16:06 Arvy

iFrameの幅に合わせて外部ウェブサイトのコンテンツをサイズ変更

答えて

関連する問題