PhoneGapアプリにiframeを埋め込むにはどうすればいいですか？

Question

電話ではモバイルビューをレンダリングするレスポンシブなスケジューリングウェブサイトがあります。 PhoneGap div内にこのWebページを表示して、ヘッダーとナビゲーションを保持できるようにします。通常のiframeコードは私にとってはうまくいかないようです。誰かが私にこのスクリーンショットのように動作させる方法のヒントを与えることができますか？ここで

は私が現在持っているものです。

<div id="set" title="Set Appointment" class="panel"> 
      <iframe width="320px" height="480px" src="http://google.com"></iframe> 
    </div> 

Answer 1

を行う必要があります。

<iframe src="http://www.myschedulingwebsite.com/" style="width:100%; height:100%;"> 

は含むdiv要素を満たす100％に高さと幅を設定します。

注：あなただけのページ自体と同じ起源のフレーム内に表示することができ、ウェブサイトを使用してのiframeを埋め込むしようとすると、ウェブインスペクタは下のエラーがスローされます。拒否

'SAMEORIGIN'に 'X-Frame-Options'が設定されているため、フレームに 'https://www.google.com/'と表示されます。

これまで述べてきたように、www.google.comとその他のサイトの埋め込みiframeは、常に空白になります。私はこれが誰かを助けることを望む。

Answer 2

あなたがそれらをしたい場合は、モバイルデバイスのWebビュー上のiframeを使用しているときにいくつかの問題に遭遇することができますので、さてあなたは、この別のquestionを確認することができますボタンと上のすべての時間をされている2つのdivは、あなただけそうするCSSを必要とする：

.topheader { 
    position:fixed; 
    bottom:0; 
} 

などを..私はそれをHELを行います願っていますPあなたは、もちろん、あなたがこの作品のdiv位置権

Answer 3

私は同じ問題を抱えていましたが、私自身の解決策でそれをやっていました。 私はsmartzoomを使っています。 iframeに100％の幅と高さを指定することはできません。ピクセルで指定する必要があります。そのため、smartzoomを使用するとiframeがコンテナの高さと幅に自動的に収まります。あなたは、あなたの必要性に応じてコードを調整HERESにjsfiddle

<div id="viewsites" class="viewsites"> 
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe> 
</div> 

Answer 4

<iframe src="mypage.html" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> 
    Your browser doesn't support iframes 
</iframe>