Saya menyadari ini sudah lama, tetapi dokumentasinya mungkin tidak sepenuhnya jelas terkait dengan file lokal, jadi saya pikir saya akan membagikan pemikiran saya. Semoga bermanfaat bagi siapa saja yang tersandung di sini.
Dokumentasi menyatakan:
Untuk menampilkan konten lokal menggunakan WebView, Anda harus membuka file HTML seperti file lainnya, lalu memuat konten sebagai string ke dalam properti Html dari HtmlWebViewSource.
Hal utama yang perlu diperhatikan adalah properti Sumber WebView HANYA untuk URL eksternal atau HtmlWebViewSource. Anda tidak dapat memasukkan URL lokal di properti Sumber. Ungkapan Anda harus membuka file HTML seperti yang lainnya berarti (seperti yang dinyatakan segera setelahnya) bahwa Anda perlu memuat konten file dari disk ke dalam variabel menggunakan jalur file lengkap, bukan URL.
Pertanyaannya kemudian menjadi Bagaimana dengan link ke file lokal lainnya? Di situlah properti BaseUrl dari HtmlWebViewSource berperan. Dokumentasi membahas hal ini dengan menyatakan yang berikut:
Meskipun halaman pertama telah dimuat, WebView tidak mengetahui dari mana HTML itu berasal. Ini merupakan masalah ketika berhadapan dengan halaman yang mereferensikan sumber daya lokal. Contoh kejadiannya adalah ketika laman lokal saling tertaut, laman menggunakan file JavaScript terpisah, atau laman tertaut ke lembar gaya CSS.
Dengan kata lain, setiap link ke sumber daya lokal di HTML Anda akan diawali dengan BaseUrl oleh Webview secara otomatis.
Singkatnya
Buat Antarmuka IBaseUrl di proyek bersama Anda
public interface IBaseUrl {
string Get();
}
Buat implementasi IBaseUrl khusus platform di setiap proyek platform
iOS:
[assembly: Dependency (typeof (BaseUrl_iOS))]
namespace WorkingWithWebview.iOS
{
public class BaseUrl_iOS : IBaseUrl
{
public string Get()
{
return NSBundle.MainBundle.BundlePath;
}
}
}
Android
[assembly: Dependency (typeof(BaseUrl_Android))]
namespace WorkingWithWebview.Android
{
public class BaseUrl_Android : IBaseUrl
{
public string Get()
{
return "file:///android_asset/";
}
}
}
UWP
[assembly: Dependency(typeof(BaseUrl))]
namespace WorkingWithWebview.UWP
{
public class BaseUrl : IBaseUrl
{
public string Get()
{
return "ms-appx-web:///";
}
}
}
Pastikan file HTML Anda berada di folder yang sesuai dan memiliki Build Action yang tepat
- iOS: Sumber Daya, tindakan pembuatan: BundleResource
- Android: Aset, tindakan build: AndroidAsset
- UWP: akar proyek, tindakan pembangunan: konten
Pastikan WebView memiliki permintaan tinggi dan lebar atau mungkin tidak dirender:
Mungkin perlu mengatur properti widthRequest dan HeightRequest dari WebView untuk melihat konten HTML, bergantung pada tata letak WebView yang merupakan turunannya. Misalnya, ini diperlukan dalam StackLayout.
Setelah penyiapan itu selesai, Anda dapat menerapkannya di proyek bersama Anda. Berikut ini contoh yang disederhanakan:
// Use DI function to get the BaseUrl for the platform
var baseUrl = DependencyService.Get<IBaseUrl>().Get();
// You could append subfolders here if you don't
// want all the HTML files mixed with other resources:
// var baseUrl = System.IO.Path.Combine(DependencyService.Get<IBaseUrl>().Get(), "subfolder");
// Define the location of your initial HTML page using the base url
var initialHtmlPath = System.IO.Path.Combine(baseUrl, "index.html");
// Create the viewsource, loading the first HTML file as a string
var localHtmlViewSource = new HtmlWebViewSource();
localHtmlViewSource.BaseUrl = baseUrl;
localHtmlViewSource.Html = System.IO.File.ReadAllText(initialHtmlPath);
// Set the webview to use the local source
HelpWebView.Source = localHtmlViewSource;
person
kiddailey
schedule
02.03.2021
