android - تقديم HTML في WebView مع CSS مخصص




(4)

يستخدم تطبيقي JSoup لتنزيل HTML لصفحة لوحة الرسائل (دعنا نقول في هذه الحالة إنها صفحة تحتوي على مشاركات لمؤشر ترابط معين). أرغب في استخدام شفرة HTML هذه ، وإزالة العناصر غير المرغوب فيها ، وتطبيق CSS مخصص لأسلوبه ليكون "متحركًا" في WebView.

يجب أن أحقن الأنماط في HTML أثناء معالجتها (بما أنني سوف أعالجها على أي حال) أو هل هناك طريقة جيدة لإضافة ملف CSS إلى أصول تطبيقي والإشارة إليه ببساطة. أعتقد أن هذا الأخير سيكون مثالياً ، لكنه غير متأكد من كيفية القيام به.

أرى تلميحات في loadDataWithBaseURL WebView أنه يمكنك الرجوع إلى الأصول المحلية ، ولكن لست متأكدا من كيفية الاستفادة منها.


أفترض أن ورقة الأنماط "style.css" موجودة بالفعل في مجلد الأصول

  1. تحميل صفحة الويب مع jsoup:

    doc = Jsoup.connect("http://....").get();
    
  2. إزالة الروابط إلى أوراق الأنماط الخارجية:

    // remove links to external style-sheets
    doc.head().getElementsByTag("link").remove();
    
  3. تعيين رابط إلى ورقة الأنماط المحلية:

    // set link to local stylesheet
    // <link rel="stylesheet" type="text/css" href="style.css" />
    doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");
    
  4. إنشاء سلسلة من jsoup-doc / صفحة ويب:

    String htmldata = doc.outerHtml();
    
  5. عرض صفحة الويب في عرض الويب:

    WebView webview = new WebView(this);
    setContentView(webview);
    webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
    

إذا كان لديك CSS في مخزن الملفات الداخلي يمكنك استخدامه

//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);

// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                      + "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";

//load the html with the baseURL, all files relative to the baseURL will be found 
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

هل من الممكن عرض كل المحتوى في الصفحة ، في قسم معين؟ يمكنك بعد ذلك إعادة تعيين css استنادًا إلى المعرّف ، والعمل عليه من هناك.

لنفترض أنك تمنح رقم div الخاص بك = "ocon"

في css الخاص بك ، لديك تعريف مثل:

#ocon *{background:none;padding:0;etc,etc,}

ويمكنك تعيين القيم لمسح كل المغلق من التطبيق على المحتوى. بعد ذلك ، يمكنك فقط استخدام

#ocon ul{}

أو أي شيء آخر ، أسفل ورقة الأنماط ، لتطبيق أنماط جديدة على المحتوى.


هنا هو الحل

ضع html و css في مجلد / أصول / مجلد ، ثم حمِّل ملف html مثل:

    WebView wv = new WebView(this);

    wv.loadUrl("file:///android_asset/yourHtml.html");

ثم في html الخاص بك يمكنك الرجوع إلى CSS الخاص بك بالطريقة المعتادة

<link rel="stylesheet" type="text/css" href="main.css" />




webview