[web] fix web callbacks by p-mazhnik · Pull Request #2058 · pichillilorenzo/flutter_inappwebview

p-mazhnik · 2024-03-08T13:18:32Z

Fixes #2026, fixes #2045, fixes #2046

Related to flutter/flutter#143922

asarkar101 · 2024-03-13T05:29:52Z

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

p-mazhnik · 2024-03-13T08:54:40Z

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

sanalkv · 2024-03-21T10:35:11Z

@pichillilorenzo Please kindly review this.

sanalkv · 2024-04-02T08:31:54Z

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

GelistirmeKF · 2024-04-19T19:33:07Z

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

david98pp · 2024-04-25T23:18:39Z

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

p-mazhnik · 2024-04-26T12:06:08Z

@david98pp you can add dependency override

dependency_overrides:
  flutter_inappwebview_web:
    git:
      url: git@github.com:p-mazhnik/flutter_inappwebview.git
      path: flutter_inappwebview_web
      ref: 7cac4c3c0ce50302cb9144901f425d00e4bf4870 
      # or ref: web-fix

david98pp · 2024-04-26T15:27:28Z

@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 · 2024-04-26T16:44:08Z

@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 · 2024-04-29T07:00:19Z

@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 · 2024-06-25T09:07:55Z

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

yashharkhani · 2024-07-09T16:47:42Z

@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 · 2024-07-10T15:35:20Z

@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 · 2024-07-10T22:48:36Z

@andynvt

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

onProgressChanged wasn't supported for web in this package:

flutter_inappwebview/flutter_inappwebview_platform_interface/lib/src/in_app_webview/platform_webview.dart

Lines 122 to 127 in 4c58653

    
             ///**Officially Supported Platforms/Implementations**: 
        
             ///- Android native WebView ([Official API - WebChromeClient.onProgressChanged](https://developer.android.com/reference/android/webkit/WebChromeClient#onProgressChanged(android.webkit.WebView,%20int))) 
        
             ///- iOS 
        
             ///- MacOS 
        
             ///{@endtemplate} 
        
             final void Function(T controller, int progress)? onProgressChanged;

@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?

andynvt · 2024-07-11T05:31:00Z

@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 · 2024-07-11T07:26:03Z

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 · 2024-07-11T08:15:34Z

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

skalex4 · 2024-07-12T03:16:53Z

@andynvt

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

onProgressChanged wasn't supported for web in this package:

flutter_inappwebview/flutter_inappwebview_platform_interface/lib/src/in_app_webview/platform_webview.dart

Lines 122 to 127 in 4c58653

///**Officially Supported Platforms/Implementations**:

///- Android native WebView ([Official API - WebChromeClient.onProgressChanged](https://developer.android.com/reference/android/webkit/WebChromeClient#onProgressChanged(android.webkit.WebView,%20int)))

///- iOS

///- MacOS

///{@endtemplate}

final void Function(T controller, int progress)? onProgressChanged;

@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 · 2024-07-12T03:20:32Z

@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 · 2024-07-12T04:10:24Z

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 · 2024-07-12T04:20:18Z

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 · 2024-07-16T06:03:39Z

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

hn-n · 2024-07-18T12:13:36Z

any updates ?

sanalkv · 2024-08-08T14:02:19Z

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 · 2024-08-08T14:04:23Z

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 · 2024-08-12T03:12:53Z

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

madhavibrillio · 2024-08-12T07:09:40Z

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

sanalkv · 2024-08-12T07:12:51Z

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 - pichillilorenzo@gmail.com

madhavibrillio · 2024-08-12T07:22:01Z

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

fawdlstty · 2024-09-21T05:05:53Z

@arrrrny The author is back #2268

arrrrny · 2024-09-21T05:17:21Z

@arrrrny The author is back #2268

I am glad

* Update Flutter to 3.24.3 (stable) Only web build works with this configuration * Bump Flutter version in workflows to `3.24.x` * Remove `desktop_webview_window` dependency * Switch to in-app webview in popup-window * Upgrade `file_picker` to 8.1.2 to fix ios&macos build error win32 v5 removes references to deprecated APIs, which jonataslaw/get_cli#263 * Upgrade `url_launcher` to 6.3.0 to fix iOS build error * Skip web defi fetch step if target is iOS * Bump CI Flutter version to `3.24.x` * Fix mobile coin details buttons layout - Also fix Bitrefill button in preparation for cross-platform fiat onramp in a similar fashion * Add fullscreen in-app-webview for native platforms * Close the browser if redirected to web app This is a failure condition for the `checkout_status_redirect.html` page * Move payment status events to BLoC The async onConsole/onMessage callback used by the `flutter_inappwebview` package is incompatible with the previous watcher implementation. * Migrate bitrefill provider & watcher to package:web * refactor fullscreen webview to webview dialog * add fiat onramp html page fixes issues with reading `onmessage` and `window.console` from an iframe or another window * apply patch to `web_support.js` to fix web callbacks from pichillilorenzo/flutter_inappwebview#2058 * migrate remaining fiat & bitrefill html references to package:web * WIP: add initial fiat onramp bloc implementation * fix arb merge issue: add arb to currency class * fix type conversion bugs and add more error logging add stacktrace to logs when in kDebug mode * replace onCheckoutComplete callback with BlocListener * improve form state management and add default payment methods list for initial user input * fix cross-platform compilation with conditional imports package:web and js_interop only work on web, so use conditional exports * fix cocoapods build warnings * use url instead of proxy page on native platforms only web requires the proxy page because of CORS restrictions. onConsole, and onMessage works on native platforms * fix hive runtime init exception `Hive.initFlutter` failed on macOS and appears to be a web-specific function that produces an exception on native platforms * add error parsing for banxa order creation * localize fiat error and popup messages * fix status message parsing in wrapper html page * move getCoinAddress to coins bloc * update testing and setup docs add example launch.json and iOS crash logs location add notes about linux setup * fix fiat amount injecting decimals removed unnecessary string `error` field, since the status fields suffice * fix onramp error on linux & banxa parsing bug * fix fiat form overlapping issues on mobile - use autoscrolltext, expand, and align - fix fiat icon errors when scrolling quickly - fix webview platform check * fix flutter analyze warnings * add fiat onramp form integration test * bump build transformer package commit * improve status parsing on native platforms - parsing errors from escaped json strings on Windows - re-enable banxa order status watching * fix coins bloc and Hive init race condition on macos Runtime updates Hive boxes have to be initialised on native platforms before coins bloc executes, which was not happening consistently across all platforms * move confirmation prompt behind conditional import `web` and `js_interop` package imports do not compile on native platforms, so they have to be hidden behind conditional imports to allow for cross-platform support

[web] fix web callbacks

1e315f0

probot-autolabeler bot added the flutter/dart label Mar 8, 2024

[web] replace iframeId with iframe.id

d45532d

p-mazhnik added 2 commits March 16, 2024 19:35

update tests

c2ca368

fix viewId type

7cac4c3

p-mazhnik mentioned this pull request Mar 16, 2024

[web] migrate to pkg:web and js_interop #2067

Merged

yashharkhani mentioned this pull request Jul 10, 2024

The web project did not receive the onLoadStop callback, as well as the addJavaScriptHandler and evaluateJavascript methods #2217

Closed

andynvt mentioned this pull request Jul 17, 2024

(Web) WebPlatformInAppWebViewWidget ID 0 #2163

Closed

2 tasks

This comment was marked as spam.

Sign in to view

pichillilorenzo merged commit 54dc69a into pichillilorenzo:master Sep 23, 2024

Uh oh!

Conversation

p-mazhnik commented Mar 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

asarkar101 commented Mar 13, 2024

Uh oh!

p-mazhnik commented Mar 13, 2024

Uh oh!

sanalkv commented Mar 21, 2024

Uh oh!

sanalkv commented Apr 2, 2024

Uh oh!

GelistirmeKF commented Apr 19, 2024

Uh oh!

david98pp commented Apr 25, 2024

Uh oh!

p-mazhnik commented Apr 26, 2024

Uh oh!

david98pp commented Apr 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

david98pp commented Apr 26, 2024

Uh oh!

asarkar101 commented Apr 29, 2024

Uh oh!

andynvt commented Jun 25, 2024

Uh oh!

yashharkhani commented Jul 9, 2024

Uh oh!

andynvt commented Jul 10, 2024

Uh oh!

p-mazhnik commented Jul 10, 2024

Uh oh!

andynvt commented Jul 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Result (not working with controller. evaluateJavascript

Result when I call javascript in Chrome Devtool - Console

Uh oh!

p-mazhnik commented Jul 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andynvt commented Jul 11, 2024

Uh oh!

skalex4 commented Jul 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andynvt commented Jul 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skalex4 commented Jul 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andynvt commented Jul 12, 2024

Uh oh!

skalex4 commented Jul 16, 2024

Uh oh!

hn-n commented Jul 18, 2024

Uh oh!

sanalkv commented Aug 8, 2024

Uh oh!

sanalkv commented Aug 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andynvt commented Aug 12, 2024

Uh oh!

madhavibrillio commented Aug 12, 2024

Uh oh!

sanalkv commented Aug 12, 2024

Uh oh!

madhavibrillio commented Aug 12, 2024

Uh oh!

This comment was marked as spam.

fawdlstty commented Sep 21, 2024

Uh oh!

arrrrny commented Sep 21, 2024

Uh oh!

Reviewers

Assignees

Labels

p-mazhnik commented Mar 8, 2024 •

edited

Loading

david98pp commented Apr 26, 2024 •

edited

Loading

andynvt commented Jul 11, 2024 •

edited

Loading

Result (not working with `controller. evaluateJavascript`

p-mazhnik commented Jul 11, 2024 •

edited

Loading

skalex4 commented Jul 12, 2024 •

edited

Loading

andynvt commented Jul 12, 2024 •

edited

Loading

skalex4 commented Jul 12, 2024 •

edited

Loading

sanalkv commented Aug 8, 2024 •

edited

Loading