Android：在 Browser/YouTube App 中打开 WebView 的 iframe答案

【问题标题】：Android:Open iframe of WebView in Browser/YouTube AppAndroid：在 Browser/YouTube App 中打开 WebView 的 iframe
【发布时间】：2015-04-24 07:10:16
【问题描述】：

我有一些博客的 JSON 内容，我在 WebView 中使用 loadDataWithBaseURL 显示这些内容。该博客的许多文章都嵌入了 youtube/vimeo 视频。

目前，所有视频都在 webview 本身内播放。

我想要实现的是，当用户点击播放视频时，他应该会弹出“使用浏览器或 YouTube 应用程序完成操作”。简而言之，我不希望视频在应用的 webview 中播放。

我发现每个人都试图避免这个弹出窗口的问题。不知道为什么我没有得到它。

这是我的代码

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;
    }
}

任何能让视频在浏览器或 YouTube 应用中加载的解决方案都会有所帮助。

注意

我在 webview 中显示的内容是 HTML 格式，其中 iframe 作为元素之一。这是示例数据：

"<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>

整个内容都显示在 webview 中。我想要实现的是当有人点击iframe时，应该提示他complete action using，即不允许该人在webview中播放视频

【问题讨论】：

标签： android json iframe webview

【解决方案1】：

我设法使用正则表达式实现了这一点。

这就是我所做的

@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 : "";
}

可能会帮助有类似问题的人。

【讨论】：

【解决方案2】：

这可能会有所帮助。我们正在正确的本机应用程序中加载新的 url。

desc.setWebViewClient(new WebViewClient() {

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

            return true;
        }

                });

【讨论】：

视频仍然只在 webview 中播放.. 我只需要添加你建议的行吗？？
是的，您必须单独添加这些行。你也可以在 shouldoverrideurlloading 中尝试这个 if(url.contains("youtube.com")){ // 可以更聪明，使用正则表达式 return super.shouldOverrideUrlLoading(view, url); // 离开 webview 并使用浏览器 }
我添加了您的代码，但视频仍仅在 webview 中播放。我已经更新了这个问题，所以你可以知道我到底想要实现什么

【解决方案3】：

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;

            });

【讨论】：

【解决方案4】：

如果链接嵌入在 iframe 中（如标题所示），您必须将 WebChromeClient 设置为您的 webview 并覆盖 onCreateWindow 方法：

@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;
}

在你的 webview 的 websettings 中，你必须设置：

settings.setSupportMultipleWindows(true);

【讨论】：

我添加了WebChromeClient，但视频仍然只在 web 视图中播放。我已经更新了这个问题，所以你可以知道我到底想要实现什么
@Swapna: html 在你的控制之下吗？如果是，请尝试用 a-tag 包围您的 iframe：youtube.com/embed/q7uBAtaK15I\">....，然后在 shouldOverride- 中匹配并捕获 url方法并触发我上面建议的意图。