web-dev-qa-db-ja.com

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

電話中にモバイルビューをレンダリングするレスポンシブスケジューリングWebサイトがあります。このWebページをPhoneGapdiv内に表示して、ヘッダーとナビゲーションを維持できるようにします。通常のiframeコードは私にはうまくいかないようです。下のスクリーンショットのようにこれを機能させる方法について誰かが私にヒントを教えてもらえますか？.

これが私が現在持っているものです：

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

enter image description here

html5iframecordova
8
KlassAktKreations

これは機能します：

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

高さと幅を100％に設定すると、含まれているdivが埋められます。

注：ページ自体と同じオリジンのフレームにのみ表示できるWebサイトを使用してiframeを埋め込もうとした場合、Webインスペクター以下のエラーがスローされます：

「X-Frame-Options」を「」に設定したため、フレームに「 https://www.google.com/ 」を表示できませんでした[〜＃〜]同一生成元[〜＃〜] '。

そうは言っても、www.google.comや他のいくつかのサイトに埋め込まれているiframeは常に空白になります。これが誰かに役立つことを願っています。

17
KlassAktKreations
<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>
3
Mahdi Esmaeili

これをもう1つ確認できます 質問 モバイルデバイスのWebビューでiframeを使用するといくつかの問題が発生する可能性があるため、これら2つのdivを常にボタンとトップに配置したい場合は、cssだけが必要です。そうする：

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

など..私はそれがあなたを助けることを願っています、もちろんあなたはdivの位置の権利を作る必要があります

0
jycr753

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

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