Android：在WebView中未正確顯示jQuery滑塊

嗨，我爲Android編程了一個RSS閱讀器。有時Feed中包含一個jQuery滑塊（RoyalSlider http://dimsemenov.com/plugins/royal-slider/），並且這個不會顯示在我的webview中。Android：在WebView中未正確顯示jQuery滑塊

我的WebView初始化這樣的：

@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

任何一個想法，我的錯誤是哪裏？

來源

2013-12-17 Mr.Mojo

你使用的是什麼版本的android？ – ksasq

@ksasq Android 4.1.2 –

在我看來，像滑塊的JavaScript或CSS沒有正確加載。對loadDataWithBaseUrl的調用看起來不正確。爲什麼js會提供基本網址？數據是什麼樣的？ – ksasq

http://www.test.de/1.jpg鏈路斷開 - 給出了404

檢查所有其他引用URL被渲染。

除非URL正在工作，否則我看到您收到的列表項目符合預期。

來源

2013-12-26 07:54:30 takrishna

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

來源

2013-12-26 17:19:30 Sush

Android：在WebView中未正確顯示jQuery滑塊

回答

相關問題