Question

您好，我为Android编写了一个RSS阅读器。有时Feed会包含一个jQuery滑块（RoyalSlider http://dimsemenov.com/plugins/royal-slider/），而这个滑块不会显示在我的网页浏览中。

我的网页视图初始化如下：

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    // Initialize views after the activity is created
    TextView title = (TextView) getView().findViewById(R.id.title);
    TextView author = (TextView) getView().findViewById(R.id.author);
    TextView date = (TextView) getView().findViewById(R.id.date);
    WebView wv = (WebView) getView().findViewById(R.id.desc);

    // Enable the vertical fading edge (by default it is disabled)
    ScrollView sv = (ScrollView) getView().findViewById(R.id.sv);
    sv.setVerticalFadingEdgeEnabled(true);


    // Set webview properties
    WebSettings ws = wv.getSettings();
    //to show only one column, so that picture is always scaled correctly
    ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    ws.setJavaScriptEnabled(true);
    ws.setAllowFileAccess(true);
    ws.setAllowContentAccess(true); 

    wv.setWebChromeClient(new WebChromeClient());

    Log.d("debug","In ItemDetailFragment mit Position: "+fPos+"und Feed: "+fFeed);

    //put in data
    title.setText(fFeed.getItem(fPos).getTitle());
    author.setText(fFeed.getItem(fPos).getAuthor());
    date.setText(fFeed.getItem(fPos).getDate());
    wv.loadDataWithBaseURL("file:///android_asset/jquery-1.10.2.min.js", fFeed
            .getItem(fPos).getDescription(), "text/html", "UTF-8", null);

}

RSS Feed中的滑块如下所示（只是替换了图像的链接）：

<p><div id="royalslider-77" class="royalSlider default" style="width:620px; height:340px;"><ul class="royalSlidesContainer"><li data-src="http://www.test.de/1.jpg" class="royalSlide"></li><li data-src="http://www.test.de/2.jpg" class="royalSlide"></li><li data-src="http://www.test.de/3.jpg" class="royalSlide"></li><li data-src="http://www.test.de/4.jpg" class="royalSlide"></li><li data-src="http://www.test.de/5.jpg" class="royalSlide"></li></ul></div><script type="text/javascript">jQuery(document).ready(function() {jQuery("#royalslider-77").royalSlider({"width":620,"height":340,"skin":"default","preloadSkin":false,"lazyLoading":true,"preloadNearbyImages":true,"slideshowEnabled":false,"slideshowDelay":5000,"slideshowPauseOnHover":true,"slideshowAutoStart":true,"keyboardNavEnabled":false,"dragUsingMouse":true,"slideSpacing":0,"startSlideIndex":0,"imageAlignCenter":true,"imageScaleMode":"fit","autoScaleSlider":false,"autoScaleSliderWidth":620,"autoScaleSliderHeight":700,"slideTransitionType":"move","slideTransitionSpeed":400,"slideTransitionEasing":"easeInOutSine","directionNavEnabled":true,"directionNavAutoHide":false,"hideArrowOnLastSlide":true,"controlNavigationType":"none","auto-generate-images":false,"auto-generate-thumbs":false,"thumb-width":60,"thumb-height":60,"captionAnimationEnabled":true,"captionShowFadeEffect":true,"captionShowMoveEffect":"movetop","captionMoveOffset":20,"captionShowSpeed":400,"captionShowEasing":"easeInOutSine","captionShowDelay":200,"controlNavEnabled":false,"captionShowEffects":["fade","movetop"]});});</script><br />

在我的webview中看起来像这样，首先文本和滑块仅表示为这四个点：

enter image description here

任何人都知道我的错误在哪里？

Answer 1

http://www.test.de/1.jpg链接已损坏 - 提供404

检查所有其他引用的URL是否正在呈现。

除非网址正常，否则我会看到您收到的列表项目符号是预期的。

Answer 2

// set web chrome client by adding this in ur on create    
wv.setWebChromeClient(new CustomWebViewChromeClient());

  // this is web chrome client implemetation. it works. Any issues please put comments. i got   working
private class CustomWebViewClient extends WebViewClient
{
  public boolean shouldOverrideUrlLoading(WebView view, String url) 
  {
    // TODO Auto-generated method stub

        return false;
  } 

  @Override
  public void onPageStarted(WebView view, String url, Bitmap favicon) 
 {
   // TODO Auto-generated method stub
   super.onPageStarted(view, url, favicon);
  }

@Override
public void onPageFinished(WebView view, String url) 
{
    // TODO Auto-generated method stub
   super.onPageFinished(view, url);
 }

   @TargetApi(11)
   @Override
   public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
   Log.d("shouldInterceptRequest", url);

    InputStream stream = inputStreamForAndroidResource(url);
    if (stream != null) {
       return new WebResourceResponse("text/javascript", "utf-8", stream);
   }
   return super.shouldInterceptRequest(view, url);
}

private InputStream inputStreamForAndroidResource(String url) {
   final String ANDROID_ASSET = "file:///android_asset/";

   if (url.contains(ANDROID_ASSET)) {
       url = url.replaceFirst(ANDROID_ASSET, "");
       try {
           AssetManager assets = getAssets();
           Uri uri = Uri.parse(url);
           return assets
                   .open(uri.getPath(), AssetManager.ACCESS_STREAMING);
       } catch (IOException e) {
           e.printStackTrace();
       }
   }
   return null;
}
}

Android：在WebView中未正确显示jQuery滑块

2 个答案: