Not able to load html and js content from assets about flutter-webview-windows

[jnschulze]

On Windows, you could use something like

import 'dart:io';
import 'package:path/path.dart' as p;

String getAssetFileUrl(String asset) {
  final assetsDirectory = p.join(
      p.dirname(Platform.resolvedExecutable), 'data', 'flutter_assets', asset);

  return Uri.file(assetsDirectory).toString();
}

[jnschulze]

String getAssetFileUrl(String asset) {

What would be the value of string asset in parameter,

controller.loadUrl(getAssetFileUrl('assets/test.html'));

[CodingWithTashi]

@yisar I don't think there is eample project on this, let me know if you need. I will post example to this
Updated: Here is the medium link

[jnschulze]

1. though I am able to load html content, Js file is't working using (loadStringContent function),

Do you mean scripts that are loaded from the HTML (string) document or a directly run script using executeScript?

It might be an issue with the URLs of the resources you want to load. You’re using relative URLs, right?
I don’t know what they’re relative to. Might be the current working directory.

If the document is placed in a file anyway, why don’t you just load it via loadUrl('file://...')?

2. Also communication between dart and html js is't working and vice versa.

If the feature is implemented please provide example for each cases, if not I hope this feature will come soon

On the dart side, messages can be posted to the webview with postWebMessage and received by listening to the webMessage stream.

On the web side, you need to use window.chrome.webview.addEventListener('message', handler); (see https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-1.0.864.35#postwebmessageasjson and https://docs.microsoft.com/en-us/microsoft-edge/webview2/reference/win32/icorewebview2?view=webview2-1.0.864.35#add_webmessagereceived)

[CodingWithTashi]

Thank you @jnschulze for the respond, let me elaborate my approach:

1. I have test.html which has few html content and link to js and css, eg <script src="test.js"></script>, though I am able to load the html I am not able to trigger .js function.
   So I meant script from html, not executeScript and all document are placed inside app assets folder.

2. For communication,
   a. Say I have button in flutter app bar when I click on app bar button it should call function defined in js file and display alert as such
   b. When I click html button in webview, it should able to call dart function and display toast or snackbar or something
   PS. I was able to do in webview for mobile and web and now trying on window desktop

[jnschulze]

1. I have test.html which has few html content and link to js and css, eg <script src="test.js"></script>, though I am able to load the html I am not able to trigger .js function.
   So I meant script from html, not executeScript and all document are placed inside app assets folder.

Okay, I’d just use loadUrl as opposed to loadStringContent then.

[CodingWithTashi]

Okay, I’d just use loadUrl as opposed to loadStringContent then.

what would be the url then I tried "file://assets/test.html" and didt work

[CodingWithTashi]

String getAssetFileUrl(String asset) {

What would be the value of string asset in parameter,
I think it would be nice if you include this in example project in your repo too for loading html content in webview, for now I can see only url in your code.

[CodingWithTashi]

@jnschulze thanks, it worked. Loading html,js content from assets.You can close this issue, But I was still wondering, How can we communicate between webview to dart and vice versa as mentioned above. Is it possible with current version or can you do that in future.

[jnschulze]

It's possible by posting a message to the current document as described above.

[yisar]

@jnschulze

On the dart side, messages can be posted to the webview with postWebMessage and received by listening to the webMessage stream.

Is there a complete demo here?

[jnschulze]

@jnschulze

On the dart side, messages can be posted to the webview with postWebMessage and received by listening to the webMessage stream.

Is there a complete demo here?

Unfortunately not, but using it should be straightforward and won’t take more than five minutes to wire up.

[Xiangjinxiu]

I use loadUrl(getAssetFileUrl('assets/test.html')) it work the image show
but when use loadStringContent(html) the image doesn,t show
I want to use loadStringContent how to fix this problem