web-dev-qa-db-ja.com

Webviewiframeオーバーフロー

現在、Androidでウェブアプリを作成しています。私のアプリはWebビューで実行され、iframeを介してサードパーティのコンテンツを読み込みます。 iframeのサイズは固定されており、読み込まれたコンテンツによって変更されないようになっています。

デスクトップChromeブラウザでは正常に動作し、読み込まれたコンテンツのオーバーフロー部分はスクロールバーを介してスクロールできます。ただし、Android Webビューでは、iframeのサイズが変更される傾向がありますロードされたコンテンツに基づいてそれ自体が、ページレイアウトの混乱につながります。

他の誰かが同じ問題に遭遇しましたか？

androidiframewebviewoverflow
38
Felix Chan

私はこの厄介な問題を回避する方法を見つけました。 iframeのスクロールバーを無効にし、代わりにアプリケーションで iscroll を使用します。このスクロールバーは元のスクロールバーとほぼ同じですが、私のHTCMagic電話では遅くなります。

1
Felix Chan

アプリのWebViewでIframeを表示しようとしましたが、CSS'overflow：hidden; 'を使用してiframeの下部30pxを切り落とすことができないという問題がありました。これを回避する方法は、独自のindex.htmlファイルを作成し、アプリ内のアセットとしてローカルに保存することでした。

プロジェクト内に「assets」フォルダーがない場合は、手順1に進みます。

（これは「res」フォルダと同じではありません）

[Windows7の場合]

ステップ1-アセットフォルダーを作成します：Android Studioプロジェクトをクリックします：

ファイル->新規->フォルダ->アセットフォルダ

Windowsでアセットフォルダを作成する方法を示す画像

ステップ2-<iframes>を<div>内に保持するindex.htmlを作成します。以下のコードをコピーして使用できます。 index.htmlファイルのサンプルコードとして：

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    </head>
    <body style="margin:0px;">
        <div style="width:605px;height:875px;overflow:hidden;">
           <iframe src="https://docs.google.com/presentation/d/1QyNNURCVBme50SAuIceq3sh7Ky74LuWNeEM8B910aC4/embed?start=true&loop=true&delayms=2000" scrolling="no" frameborder="0" width="605" height="905" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
        </div>
    </body>
</html>

ステップ3-WebViewでindex.htmlファイルを呼び出します

注-（この例のWebViewのIDは 'main_ad'です。このIDをWebViewsIDの名前に変更してください）

WebView webView = (WebView) findViewById(R.id.main_ad);
webView.setWebViewClient(new WebViewClient());
webView.loadUrl("file:///Android_asset/index.html");  //this is why you needed the assets folder
webView.getSettings().setJavaScriptEnabled(true);

これが1人でもWebビューとiframeで作業するのに役立つことを願っています

0
Tyrant911

トニー。私の意見では、このトリックの重要なポイントは、iframeの高さを修正する必要があるということです。次に、iframe内の任意のdiv要素にiscrollを適用できます。これが小さなコードスニペットです：

    // disable default touchmove handler
    document.addEventListener('touchmove', function(e){
        e.preventDefault();
    });
    // make the div 'list' scrollable
    var myScroll = new iScroll('list'); // <div id='list'>Blah</div>

私はコードで jQuery を使用し、iScrollでうまく機能します。

0
Felix Chan

webViewとその親の固定サイズまたはフルサイズの高さを設定します

例えば ​​：

Android:layout_height="match_parent"

更新：Webviewの親がスクロールバーの場合は削除します

0
mehdi shamkhani