androidwebviewiframe-app

Why is the same URL for sample Where2GetIt with very different results among desktop, android browser and android webview?

I am trying to create a proof-of-concept using where2getit and I have the following sample URL for Wafflehouse

http://hosted.where2getit.com/wafflehouse/indexnew.html

When I view in three different device modes:

  1. Desktop browser (Safari or Chrome tested)
  2. Android Mobile browser (Azpen / Acer mini-tablet running Jelly Bean)
    • notice the redirection to mobile....
  3. Android Native App in a WebView as URL or data; URL only, iFrame w/ src

The images that I get are as follows:

1. enter image description here

2. enter image description here

3. enter image description here

The code in the HomeActivity is:

    public class HomeActivity extends Activity {

    private static final String TAG = "HomeActivity";
    private static final String URL_LOADING = "http://mobile.where2getit.com/wafflehouse/indexnew.html";
    private static final String HTML_BODY = "<html>" + "<body>"
            + "<iframe id='content' src='http://hosted.where2getit.com/wafflehouse/indexnew.html' margin='5%' width='80%' height='80%'/>"
            + "</body>" + "</html>";
    private static final String MIME_TYPE = "text/html";
    private static final String ENCODING = "utf-8";
    private WebView mWebView;
    private MdWebChromeClient chromeClient;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
        
        mWebView = (WebView) findViewById(R.id.webWhere2GetItIFrame);

        chromeClient = new MdWebChromeClient();
        mWebView.setWebChromeClient(chromeClient);
        mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        mWebView.getSettings().setAppCacheEnabled(false);
        mWebView.clearCache(true);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setJavaScriptEnabled(true);
        // mWebView.addJavascriptInterface(new MdJsObject(), "injectedObject");
        mWebView.loadDataWithBaseURL("http://hosted.where2getit.com", HTML_BODY, MIME_TYPE, ENCODING, "");
        // mWebView.loadUrl(URL_LOADING);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.home, menu);
        return true;
    }

    final class ClickOnCallbackScript {

        private View mHandler;

        ClickOnCallbackScript() {
        }

        public void clickOnAndroid() {
            mHandler.post(new Runnable() {

                public void run() {
                    Log.d(TAG, "\t\tC L I C K . . .");
                    // mWebView.loadUrl("http://www.mobidawg.mobi/m/products/wethepeople/index.html");
                }
            });
        }

    }

}

Epilog

I am thinking that the problem may be related to properly using an IFRAME in a WebView; or a callback that I do not know how to detect and handle. I also believe the solution is simple and others have dealt with it.

If you can offer some thoughts for discussion, then an answer will likely will emerge.

Solution

  • I can definitely tell you that the first 2 of your examples are different due to the way the OS presents itself to the website, and how then the website is coded to recognize and reply back to a desktop based web client versus a mobile based client. If you look at your android OS web browser picture, you will notice that your URL changed to begin with "mobile.". This is evidence that your Android OS web browser is presenting itself as a mobile client.

    As for the custom app you have written, it may come down to a permission. Have you added 

    <uses-permission android:name="android.permission.INTERNET" />

    to your permissions?

    Im also not sure in your particular use case whether you need to use WebChromeClient.

    Also found this on stack overflow for changing the "user agent" of your web client from within your custom app so that it can view the desktop version of a site.

    Setting WebView to view Desktop Site and Not Mobile Site