2012-02-29 25 views
15

Ứng dụng của tôi sử dụng WebView với nền trong suốt, trong đó một số thuộc tính tạo kiểu của các yếu tố được sửa đổi bằng JavaScript.Android WebView không được làm mới sau khi nội dung webview đã được sửa đổi bởi JavaScript

Sự cố: WebView không được làm mới theo thuộc tính đã sửa đổi. Khi WebView được vẽ lại (ví dụ: do thay đổi hướng của người dùng), WebView được cập nhật chính xác. Tôi đã sao chép sự cố trên Android 3.2 (trên Samsung GT) nhưng trên Android 2.1 và 4.3 tất cả đều hoạt động tốt.

Mã mẫu sao chép sự cố:
Rõ ràng khi hình ảnh đầu tiên được nhấn vào nó sẽ biến mất và nhấn vào hình ảnh thứ hai sẽ di chuyển nó. Nếu màu nền của WebView bị thay đổi thành mờ hoặc nếu tôi xóa hình ảnh được hiển thị bên dưới WebView tất cả đều hoạt động tốt ...

HTML được tải bởi chế độ xem web. :

<!DOCTYPE html> 
<html> 
    <body >  
     <img style="position:absolute;left:0px" onclick="this.style.display='none';" 
      src="http://flv.justad.tv/gallery/assets/trickplay/justad/tp-pause.png" /> 

     <img style="position:absolute;left:200px" onclick="this.style.top='200px';" 
      src="http://flv.justad.tv/gallery/assets/trickplay/justad/tp-ff.png" /> 

    </body> 
</html> 

Layout File:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" 
    > 

    <ImageView 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:scaleType="fitXY" 
       android:src="@drawable/display_background" /> 

    <RelativeLayout android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/WebviewContainer"> 

    </RelativeLayout> 

</RelativeLayout> 

Application Activity:

public class TestImageMoveActivity extends Activity { 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 
     RelativeLayout webviewContainer =   
        (RelativeLayout)findViewById(R.id.WebviewContainer); 
     WebView web = new WebView(this); 
     web.getSettings().setJavaScriptEnabled(true); 
     web.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); 
     web.setLayoutParams(
       new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); 
     web.setBackgroundColor(Color.TRANSPARENT); 

     webviewContainer.addView(web); 

     web.loadUrl("http://192.168.1.12/myWeb/localTmp/testImageMove.html"); 
    } 
} 

Screen shot trước khi tap:

Screen shot before tap
Screen shot after tap on both images

+1

Liên kết ảnh chụp màn hình của bạn bị hỏng (quyền bị từ chối). –

+0

Xin lỗi vì điều đó ... Liên kết sẽ hoạt động ngay bây giờ – hailrok

+0

Không cần phải xin lỗi, chỉ cần nói để bạn nhận thấy nó. :) –

Trả lời

0

Tôi gặp sự cố tương tự. Vấn đề phát sinh do bạn phải lưu trạng thái của WebView trong khi thay đổi hướng. Nếu không làm như vậy, trang web được xử lý như thể tải lần đầu tiên. Điều đó có nghĩa là bất kỳ thay đổi nào đã được áp dụng động với JavaScript đều bị mất hoàn toàn.

Các ưa thích/cách chính xác:
Tùy thuộc vào sự phức tạp của web của bạn, điều này có thể mất một công việc ít vì không có được xây dựng theo cách làm như vậy. Bạn phải tự xử lý những thay đổi động cần phải được lưu trong chính JavaScript. Chế độ xem cấp cao các bước cần thực hiện:

  1. Hoạt động onSaveInstanceState() gọi hàm JavaScript, ví dụ: saveState()
  2. saveState() ghi lại thông tin cần thiết vào bộ nhớ DOM, ví dụ: localStorage.
  3. Hoạt động của onRestoreInstanceState() gọi hàm JavaScript, IE restoreState()
  4. restoreState() tải thông tin từ bộ nhớ DOM và cập nhật trang web về trạng thái ban đầu.

Cách ốm khuyên nhưng dễ dàng:
Override hoạt động của bạn configChanges trong manifest. Điều đó sẽ ngăn chặn hoạt động được tái tạo và do đó trang web không nên tải lại.

Đọc thêm:
Information about recreating an Activity from saved state
Pros/Cons to overriding configChanges

0

thử bằng tay reload webview: - web.reload()

0

Thực hiện một phương pháp để làm mới webview cũ void refreshWebview(WebView webView) { webView.reload(); }

gọi refreshWebview() từ javaScript của bạn hoặc bất cứ nơi nào từ mã của bạn bằng cách sử dụng giao diện.

Các vấn đề liên quan