[web] fix web callbacks

[p-mazhnik]

Fixes #2026, fixes #2045, fixes #2046

Related to https://github.com/flutter/flutter/issues/143922

[asarkar101]

@p-mazhnik you didn't assign any reviewer.

[p-mazhnik]

@asarkar101 I am not a maintainer of this repository, therefore it is not possible to request reviews.

[sanalkv]

@pichillilorenzo Please kindly review this.

[sanalkv]

@p-mazhnik looks like the owner is not active :( @pichillilorenzo

[GelistirmeKF]

@pichillilorenzo This issue is so important for us, please consider this commit.

[david98pp]

@p-mazhnik How can I test your branch or import your branch to my project with your solution?

[p-mazhnik]

@david98pp you can add dependency override

dependency_overrides:
  flutter_inappwebview_web:
    git:
      url: [email protected]:p-mazhnik/flutter_inappwebview.git
      path: flutter_inappwebview_web
      ref: 7cac4c3c0ce50302cb9144901f425d00e4bf4870 
      # or ref: web-fix

[david98pp]

@p-mazhnik thanks for your help, the method onUpdateVisitedHistory is still not working for me, do I have to do anything extra? or any solution?

[david98pp]

@p-mazhnik the error is: DOMException: Failed to read a named property 'history' from 'Window': Blocked a frame with origin "http://localhost:58988" from accessing a cross-origin frame. at HTMLIFrameElement. (http://localhost:58988/assets/packages/flutter_inappwebview_web/assets/web/web_support.js

[asarkar101]

@p-mazhnik the error is: DOMException: Failed to read a named property 'history' from 'Window': Blocked a frame with origin "http://localhost:58988" from accessing a cross-origin frame. at HTMLIFrameElement. (http://localhost:58988/assets/packages/flutter_inappwebview_web/assets/web/web_support.js

same issue

[andynvt]

@p-mazhnik can you also fix onProgressChanged and evaluateJavascript functions not working on Flutter Web? Thank you

[yashharkhani]

@andynvt, Did you found solution to evaluateJavascript issue ?

I’m currently facing an issue with the evaluateJavascript function on the web platform. My entire app depends on this functionality, and I am unable to deploy it to the web due to this problem.

Any help or updates would be greatly appreciated, as I’m stuck and unable to proceed with my deployment.

Thank you.

[andynvt]

@andynvt, Did you found solution to evaluateJavascript issue ?

I’m currently facing an issue with the evaluateJavascript function on the web platform. My entire app depends on this functionality, and I am unable to deploy it to the web due to this problem.

Any help or updates would be greatly appreciated, as I’m stuck and unable to proceed with my deployment.

Thank you.

@yashharkhani Not yet unfortunately

[p-mazhnik]

@andynvt

can you also fix onProgressChanged and evaluateJavascript functions not working on Flutter Web?

onProgressChanged wasn't supported for web in this package: https://github.com/pichillilorenzo/flutter_inappwebview/blob/4c58653113573558ea5be880aca931e85b23da7e/flutter_inappwebview_platform_interface/lib/src/in_app_webview/platform_webview.dart#L122-L127

@yashharkhani @andynvt

evaluateJavascript is working for me in this branch. I use flutter 3.19 and 3.22. Here is the commit where I tested it: https://github.com/p-mazhnik/flutter_inappwebview/commit/295ff82d42b65cf7f93a2af142be699663787f3e

Do you have any steps to reproduce?

[andynvt]

@p-mazhnik It seems it's not working for me. I use this URL for testing.

https://99rnp6er5kop15.embednotionpage.com/Notion-test-page-3d941e191ea94e648c50d85a160cd333

await controller.evaluateJavascript(source: 'document.getElementsByClassName("layout");');
    await controller.evaluateJavascript(
      source:
          'document.getElementsByClassName("layout")[0].setAttribute("style", "--margin-width: 10px; padding-bottom: 0px;");',
    );

My pubspec

Result (not working with controller. evaluateJavascript

Result when I call javascript in Chrome Devtool - Console

[p-mazhnik]

If you're trying to access third-party site from your localhost or just from the different origin, this is expected that most of the functions won't work. Browsers block scripts trying to access a frame with a different origin, for security reasons. Typical message in console would be Blocked a frame with origin "http://your-site/" from accessing a cross-origin frame

[andynvt]

Thanks for your response @p-mazhnik. Unfortunately, I deployed it to firebase hosting. And it remains the same issue. (evaluateJavascript not working)

[skalex4]

@andynvt

can you also fix onProgressChanged and evaluateJavascript functions not working on Flutter Web?

onProgressChanged wasn't supported for web in this package:

https://github.com/pichillilorenzo/flutter_inappwebview/blob/4c58653113573558ea5be880aca931e85b23da7e/flutter_inappwebview_platform_interface/lib/src/in_app_webview/platform_webview.dart#L122-L127

@yashharkhani @andynvt

evaluateJavascript is working for me in this branch. I use flutter 3.19 and 3.22. Here is the commit where I tested it: p-mazhnik@295ff82

Do you have any steps to reproduce?

Thanks a lot @p-mazhnik!

It's working with the mentioned commit ref.

@andynvt, For web even after disabling CORS, there is a internal CORS thrown while accessing iframe of diff domain. basically, it browser restricts you to even access the iframe inside site of diff domain.

Please make sure that the domain of the site in webview and flutter site are exactly same.

[andynvt]

@andynvt, For web even after disabling CORS, there is a internal CORS thrown while accessing iframe of diff domain. basically, it browser restricts you to even access the iframe inside site of diff domain.

Please make sure that the domain of the site in webview and flutter site are exactly same

@skalex4 In my case, do you mean my firebase domain or embednotionpage domain?

[skalex4]

For me,

when I hosted my flutter app @ xyz.com and in webview I loaded abc.com.

• It didn't work. It was giving me CORS error while accessing the iFrame.
• Because of that in web_support under createFlutterInAppWebView it was not able to find the contentWindow on iFrame.
• Thus, in evaluateJavascript iframe.contentWindow was null.

But when I host flutter app @ abc.com/0.0.1 and in webview I loaded abc.com, it worked.

• Because of same domain - NO CORS.

Try out this approach,

it not able to do this, look into how you can allow "cross origin policy: *" in both domains.

It won't work on the localhost / debug mode.

[andynvt]

I cannot host the embedded webview on my server, it's in another 3rd service. I think most webview cases will look like my case (showing a 3rd party website iframe). So the evaluateJavascript won't work in that case, right?

[skalex4]

Yes @andynvt, It would be tough in that case. Try to look for allowing CORS on your site.

[hn-n]

any updates ?

[sanalkv]

Can you guys check if this sample code is giving output using this branch? , It's not working for me, unfortunately.

InAppWebView( initialUrlRequest: URLRequest(url: WebUri('https://flutter.dev')), initialUserScripts: UnmodifiableListView<UserScript>([ UserScript( source: "var foo = 49;", injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START), UserScript( source: "var bar = 2;", injectionTime: UserScriptInjectionTime.AT_DOCUMENT_END), ]), onLoadStop: (controller, url) async { var result = await controller.evaluateJavascript(source: "foo + bar"); print(result); // 51 }, ),

[sanalkv]

If you're trying to access third-party site from your localhost or just from the different origin, this is expected that most of the functions won't work. Browsers block scripts trying to access a frame with a different origin, for security reasons. Typical message in console would be Blocked a frame with origin "http://your-site/" from accessing a cross-origin frame

I'm going through the same right now. Is there any resolution for this ? @p-mazhnik

[andynvt]

@p-mazhnik Should you release a new package for this? it seems the author didn't work on this repo anymore

[madhavibrillio]

@p-mazhnik can we please merge this PR and release a new version? We are facing lot of issues because of this

[sanalkv]

Maybe instead of a new package, someone who is interested can take ownership of this package and maintain it. You can mail the developer directly. Owner - [email protected]

[madhavibrillio]

@pichillilorenzo can we please merge this PR and release a new version? We badly need this fix

[arrrrny]

@madhavibrillio @sanalkv @andynvt @hn-n @skalex4 @p-mazhnik @asarkar101 @david98pp @GelistirmeKF Open your PR on the forked project here and I will merge. There is a new package now. zikzak_inappwebview