CODEWITHSUNDEEP
androidjsoniframewebview
Swapna Lekshmanan
Swapna Lekshmanan

Reputation: 514

Android:Open iframe of WebView in Browser/YouTube App

I have some JSON content of a blog which i am displaying using loadDataWithBaseURL in WebView. Many articles of this blog have embedded youtube/vimeo videos.

Currently, all the videos are played inside the webview itself.

What i want to achieve is, when the user clicks to Play the Video, he should get the popup "Complete Action Using" Browser or YouTube App. In short, i dont want the videos to be played inside the webview of app.

I found questions where everyone was trying to avoid this popup.. Dont' know why i am not getting it.

Here is my code 

public class DetailFragment extends Fragment {

    String strTitle = null;
    String strURL = null;
    String strContent = null;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {

        super.onActivityCreated(savedInstanceState);
        setHasOptionsMenu(true);
        AdView mAdView = (AdView) getView().findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        mAdView.loadAd(adRequest);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.detail_fragment, container, false);

        strTitle = getArguments().getString("title");
        strURL = getArguments().getString("url");
        strContent = getArguments().getString("content");

        String contToDisplay = "<html><head><meta http-equiv='Content-Type' content='text/html' charset='UTF-8' /></head><body><style type='text/css'> img{width:80%;} .wp-image-42223{display:none;}</style>" + strContent+"</body></html>";

        TextView title = (TextView) view.findViewById(R.id.title);
        WebView desc = (WebView) view.findViewById(R.id.desc);


        WebSettings ws = desc.getSettings();
        ws.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        ws.setJavaScriptEnabled(true);
        ws.setLoadWithOverviewMode(true);
        ws.setUseWideViewPort(true);
        ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

        ws.setUserAgentString("Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17");
        title.setText(strTitle);
        // desc.loadData(contToDisplay, "text/html; charset=UTF-8", null);
        desc.loadDataWithBaseURL("about:blank",strContent,"text/html", "UTF-8", null);

        return view;
    }
}

any solution that wold make the videos load in browser or YouTube App would help.

NOTE

The content i am displaying in webview is in HTML format with iframe as one of the elements. Here is the sample data: 

"<p>Some text</p>
 <p><iframe src=\"https://www.youtube.com/embed/q7uBAtaK15I\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>   </p>
<p>some more text</p>

This entire content is displayed in webview. What i want to achieve is when someone clicks on iframe, he should be prompted to complete action using that is, the person shd not be allowed to play the video in webview

Upvotes: 1

Views: 2476

Answers (4)

Swapna Lekshmanan
Swapna Lekshmanan

Reputation: 514

I managed to achieve this using regex.

Here is what i did

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.detail_fragment, container, false);

    strTitle = getArguments().getString("title");
    strURL = getArguments().getString("url");
    strContent = getArguments().getString("content");

    contToDisplay = "<html><head><meta http-equiv='Content-Type' content='text/html' charset='UTF-8' /><script type='text/javascript'></script></head><body><style type='text/css'> img{width:80%;} .wp-image-42223{display:none;} </style>" + strContent+"</body></html>";

    TextView title = (TextView) view.findViewById(R.id.title);
    TextView date = (TextView) view.findViewById(R.id.date);
    TextView authorName = (TextView) view.findViewById(R.id.auth);
   desc = (WebView) view.findViewById(R.id.desc);


    setHasOptionsMenu(true);

    WebSettings ws = desc.getSettings();
      ws.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
    ws.setJavaScriptEnabled(true);
    ws.setLoadWithOverviewMode(true);
    ws.setUseWideViewPort(true);
    ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    ws.setSupportMultipleWindows(true);

    ws.setUserAgentString("Mozilla/5.0 (Linux; U; Android 2.0; en-us; Droid Build/ESD20) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17");
    title.setText(strTitle);

    final String s = strContent;
    final String regex = "(?<=<iframe src=\")[^\"]*";
    final String regex2 = "<\\s*iframe[^>]*><\\s*/\\s*iframe>";
    p = Pattern.compile(regex);
    final Pattern p2 = Pattern.compile(regex2);
    m = p.matcher(s);
     m2 = p2.matcher(s);
    evaluate(s,contToDisplay,this);
    desc.loadData(value, "text/html; charset=UTF-8", null);
    return view;
   }

     String evaluate(String token,String defaultValue, DetailFragment context){
     value=null;
    Matcher matcher=p.matcher(token);
    if (matcher.find()) {
        iframeURL=matcher.group();
        String newURL = "<a href=\"" + iframeURL + "\">Watch the Video Here</a>";
        value = m2.replaceAll(newURL);
    }
    if (value == null) {
        value=defaultValue;
    }
    return value != null ? value : "";
}

Might help someone with similar issue.

Upvotes: 1

A.D.
A.D.

Reputation: 1452

If the links are embedded in an iframe (as the title suggested) you have to set a WebChromeClient to your webview and override the onCreateWindow-method:

@Override
public boolean onCreateWindow (WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {

    WebView targetWebView = new WebView(view.getContext()); 
    targetWebView.setWebViewClient(new WebViewClient(){

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            //simple url matching
            if (url.contains("youtube.com") == true) {

                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse(url));
                view.getContex().startActivity(i);
            }
            view.stopLoading();
        }
    });
    WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
    transport.setWebView(targetWebView);
    resultMsg.sendToTarget();
    return true;
}

And at the websettings of your webview, you have to set:

settings.setSupportMultipleWindows(true);

Upvotes: 0

Prasanth Perumal
Prasanth Perumal

Reputation: 279

desc.setWebViewClient(new WebViewClient() {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view,
                                            String url)
    {
    if(url.contains("youtube.com")){ 
     // Could be cleverer and use a regex return                                    
    return super.shouldOverrideUrlLoading(view, url);
                }
    return true;

            });

Upvotes: 0

Prasanth Perumal
Prasanth Perumal

Reputation: 279

This may help.we are loading a new url load in the correct native app.

desc.setWebViewClient(new WebViewClient() {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view,
                                                String url)
        {

            return true;
        }

                });

Upvotes: 0

Related Questions