Show Iframe inside a WebView

3

I need to be able to show the content of an iframe in my app that contains a webview.

It turns out that I have an app that contains a webview, inside this is a website (up there without problems), the problem arises that within this site there is a button that takes me to a section that is an iframe , but unfortunately when entering this section the webview shows me a blank image and does not reproduce the content, I have made several changes to my code, such as adding permissions, etc.

Here is the code of my WebView.

private void valida_version() {
    final WebView webView;
    webView = (WebView)findViewById(R.id.webView);
    webView.setInitialScale(1);
    webView.setWebChromeClient(new WebChromeClient());
    webView.getSettings().setAllowFileAccess(true);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON);
    webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
    webView.setWebViewClient(new WebViewClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);


    webView.loadUrl("url");

    /*myBrowser = (WebView)findViewById(R.id.webView);
    myBrowser.setWebViewClient(new WebViewClient());

    myBrowser.getSettings().setAllowFileAccessFromFileURLs(true);

    myBrowser.getSettings().setJavaScriptEnabled(true);
    myBrowser.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    myBrowser.getSettings().setDatabaseEnabled(true);
    myBrowser.setWebChromeClient(new WebChromeClient());
    myBrowser.loadUrl("http://m.cooperativa.cl");


    myBrowser.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            String msgToSend = "x";
           // Log.i("llego a onpage","si");
           myBrowser.loadUrl("javascript:oldAppMsje.callFromActivity(\"" + msgToSend + "\")");
        }
    });*/
}

Here's the code of my Manifest

<?xml version="1.0" encoding="utf-8"?>

    

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

<application
    android:allowBackup="true"
    android:icon="@drawable/appicon"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/ThemeCoop"
    android:name="AnalyticsApplication"
    android:hardwareAccelerated="true">

    <activity
        android:name="Splash"
        android:label="@string/app_name">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <activity
        android:name=".MainActivity"
        android:label="@string/app_name">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>
    </activity>

    <activity
        android:name=".SinConexion"
        android:label="@string/app_name">
    </activity>
</application>

Here I show what I can capture from Log cat.

Is it possible that you can help me with a little guidance on what I should do?

    
asked by Rodrigo 15.06.2016 в 18:08
source

2 answers

1

You have to know that when you need to embed HTML code like tags, two requirements are required in our app.

The first one is to have activated the android:hardwareAccelerated option and the Internet access permission added in our Manifest.xml , just like this in the following example:

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

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:hardwareAccelerated="true"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

Another possible problem is not having the WebChromeClient configured, but you have already configured it.

Also, I mention a small detail that I just saw in your code reviewing the answer.

You have to keep in mind that when loading a website and uploading content from a website, they are totally different here on Android.

If you want to load a web page, use the loadUrl(url_pagina) function, but if not, use the loadData (String data, String mimeType, String encoding) function. I show you an example to understand it better and I also leave the explanation of Google in this link:

    String frameVideo = "<html><body>Youtube video .. <br> <iframe width="320" height="315" src="https://www.youtube.com/embed/lY2H2ZP56K4" frameborder="0" allowfullscreen></iframe></body></html>";

    WebView displayVideo = (WebView)findViewById(R.id.webView);
    displayVideo.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    WebSettings webSettings = displayVideo.getSettings();
    webSettings.setJavaScriptEnabled(true);
    displayVideo.loadData(frameVideo, "text/html", "utf-8");

You pass the URL of the code you want to show as the first parameter, in this case the iframe, as second you pass the data type MIME that will be and as third the coding of the data.

I hope it is some of these solutions and have not misunderstood your question. Let me know if you have a problem or it is not what you need.

Good luck!

    
answered by 15.06.2016 в 18:52
1

I write another answer because I did not fit all the text I wanted to comment on in a comment. I tell you.

I have finally managed to test your app in my Android Studio and although I have not managed to know the reason for your problem, I can tell you some things that I have found out.

I have tested your application on a device with Android 6.0 version (I have touched the gradle to support the version) and when I run it, as you say, it did not work, but while I was reviewing the code with the emulator on , after a while, I started listening to that radio. I also have to tell you to click on the Radio en vivo button and then click on play .

Also tell you, I have searched the Internet about the problem and I have read many comments saying that this option did not work, that it was not compatible with some versions or even that it could be because of the type of output format of the audio device. In any case, I have not found any solution. You really do not have any errors in your code (or at least that I can identify). So my advice is the following:

  • Check if the radio option works by running directly on the WebView instead of the MediaPlayer .
  • Check if the streaming of the radio itself is well optimized, it may not be executed or delayed too much because it is not.
  • Take an app that is this type and unzip it to see if you can get some other way to perform this function. This option is not to what extent is legal, so I leave it in your hands.
  • Like other useful tips, I recommend that you modify your question explaining that the problem is that you do not get audio playback via streaming in your app and not that you do not work a iframe , since they are different things . Also enter your URL of GitHub in the question so they can better observe your code and see something that I have not seen. Finally, I recommend that you also ask the question in StackOverflow en ingles and thus have a double chance of finding the solution.

    To finish, and this is just an opinion , I recommend that you do not compatibilize with such low versions, from the API 17 or JellyBean it is more than enough and you host a very large group of devices (the 83% if I'm not mistaken). That you lower the compatibility so much can give you many problems . On the other hand, I've seen that you detect what type of connection is being used on the device and you use a function that will be obsolete in future versions, so I recommend that you not inform the user of if you are using WiFi or data, because that is not your problem , it is the user's and change the connection check by the following code:

    ConnectivityManager connectivityManager = (ConnectivityManager)                                          getSystemService(Context.CONNECTIVITY_SERVICE);
    NetworkInfo info = connectivityManager.getActiveNetworkInfo();
    if (info == null || !info.isConnected() || !info.isAvailable()) {
        return false; // Desconectado
    } else {
        return true; // Conectado
    }
    

    You can also see another way to continuously detect how to check the connection , in case it happens that once the app is turned on, the user loses the connection.

    I regret that I have not been able to solve your problem, but at least I hope you will be served with these tips.

    I wish you good luck and if you find a solution, do not hesitate to answer yourself to further enrich the community.

    Good luck!

        
    answered by 16.06.2016 в 12:43