Add onOpenWindow event

[Ldoppea]

Hi,

This PR is a proposal for handling target=_blank links and JS window.open() calls that usually ends to opening a new tab/window in a web browser.

With current implementation, those links are handled differently on iOS and Android.

The idea is to introduce a react-native onOpenWindow event that would be called when the WebView wants to open a new tab/window.

By doing so, the developper can control what is done with those links and (if needed) to force same behavior on iOS and Android.

This is something I need in my current project as I want to open those links using an InAppBrowser. Also I want to have control on which links I allow to open or not.

The API would be used like this:

<webview
  source={source}
  onOpenWindow={(syntheticEvent) => {
    const { nativeEvent } = syntheticEvent
    const { targetUrl } = nativeEvent
    
    if (isFromMyDomain(targetUrl)) {
      navigateTo(targetUrl)
    } else {
      openInAppBrowser(targetUrl)
    }
  }}
/>

If onOpenWindow is not defined, then the old behavior is applied

By doing so, I think this would answer some of existing issues that needs to disable opening the browser (#2164), open popups in the app (#2087) or maybe force the same behavior on both Android and iOS (#1855 and #139).

Old behavior

• On Android
  • <a href="https://example.com" target="_blank" /> from DOM -> opens the device's browser
  • window.open('https://example.com', '_blank') from JS -> opens the device's browser
• On iOS
  • <a href="https://example.com" target="_blank" /> from DOM -> opens the link in the current webview
  • window.open('https://example.com', '_blank') from JS -> opens the link in the current webview

New behavior

• On Android
  • <a href="https://example.com" target="_blank" /> from DOM -> calls onOpenWindow if defined, otherwise opens the device's browser
  • window.open('https://example.com', '_blank') from JS -> calls onOpenWindow if defined, otherwise opens the device's browser
• On iOS
  • <a href="https://example.com" target="_blank" /> from DOM -> calls onOpenWindow if defined, otherwise opens the link in the current webview
  • window.open('https://example.com', '_blank') from JS -> calls onOpenWindow if defined, otherwise opens the link in the current webview

Example

I wrote an example in example/examples/OpenWindow.tsx. It is accessible from OPENWINDOW tab.

In this example you can compare behaviors with and without the onOpenWindow event by toggling the Intercept OpenWindow event switch.

In the WebView there is a button for calling window.open() and a link for testing both scenario.

On iOS, because the old behavior does a navigation, you can use the RESET WEBVIEW button to go back to the example page.

Notes

target="_blank" on iOS

On 1403f01 I wrote specific code to handle target="_blank" links from onShouldStartLoadWithRequest.

This is because on my project I have a hook that react to the WebView ref changes. I noticed that in createWebViewWithConfiguration the WebView's ref would be updated with the new URL whatever is done. So we should intercept target="_blank" links before this method is called (this worked fine with window.open()).

hasTargetFrame on iOS

On iOS I added the hasTargetFrame boolean to onShouldStartLoadWithRequest parameters. I used this value to detect new tab/window links on iOS and I thought it was a good thing to expose it also in onShouldStartLoadWithRequest: 34375e9

Event registration detection on Android

In 6c3d521 I tried to call the event only if defined on react-native props. I'm not sure this is the correct way, but I don't know how to do this without using a dedicated prop.

Do you know a better solution?

Also this does not update after first initialisation as onDropViewInstance is called on Android after the view is initialized. So mWebChromeClient becomes null and I then I don't know how to update it. I don't need this feature so I did not investigate much (note that the example works because I reset the WebView by changing its key prop)
fixed thanks to @TheAlmightyBob on this comment

Note that I tried implementing an event with callback, but I failed to handle the callback from the RNCWebChromeClient.

Event registration detection on iOS

I did the same on iOS in 3ecf879 but here I didn't need to use a dedicated prop.

In my project (rn 0.66.4), I don't need this commit to detect the event registration (the if (_onOpenWindow) code works from scratch), but on your Example projet I need to. I don't know why the behavior is different on both project. But the version with the latest commit works on both, so I suppose it costs nothing to add this commit?

iOS build instructions

I fixed the documentation about iOS build instruction as the previous version did not work on my computer. Tell me if you want me to extract this commit into another PR

macOS and Windows implementation

I did not implement this event on macOS and Windows because I don't need them and it would take me a bit of time to install environment for those platforms + I don't know if my solution would be accepted by your team.

But if you think my PR is eligible for a merge and if you want me to implement those platforms, I can make a try.

[jackkinsella]

I'm very excited about this PR -- I think it's gonna be a great addition to the library, especially for people building hybrid web/React Native apps.

[allan-simon]

Excited too, if we can do anything to help this move forward , let us know :)

[l1ttps]

nice

[allan-simon]

@Ldoppea can you rebase ?

[Ldoppea]

@Ldoppea can you rebase ?

Hi, I just did it, thanks for the reminder 👍

[saifudheenpm3]

I'm too excited for this PR.
My work involves hybrid apps.
I'm in a tough spot and could really have used this feature. onOpenWindow 🔥

[TheAlmightyBob]

Just a first pass review but in general I like what I'm seeing thus far. Thank you in particular for the detailed writeup, example app update, and making the behavior opt-in.

[TheAlmightyBob]

this does not update after first initialisation as onDropViewInstance is called on Android after the view is initialized. So mWebChromeClient becomes null and I then I don't know how to update it

This is very curious to me and I wonder if it's a bug? I would expect other functionality to be broken if onDropViewInstance is being called right after the view is initialized...??

That said, possibly you could work around it by using WebView.getWebChromeClient instead of directly accessing mWebChromeClient?

[TheAlmightyBob]

I've also been pondering whether "real" multi-window support could be added (such that the caller of window.open would get a proper reference to the opened window and the opened window could use window.opener), possibly leveraging some of the same ideas as in #2469 for managing multiple WebViews in a dictionary....

But of course that's much more complex and I think there would still be use cases that prefer what you've got here. 🙂

[Ldoppea]

this does not update after first initialisation as onDropViewInstance is called on Android after the view is initialized. So mWebChromeClient becomes null and I then I don't know how to update it

This is very curious to me and I wonder if it's a bug? I would expect other functionality to be broken if onDropViewInstance is being called right after the view is initialized...??

That said, possibly you could work around it by using WebView.getWebChromeClient instead of directly accessing mWebChromeClient?

This did the trick. Now the prop is propagated in realtime. Thanks for the tips @TheAlmightyBob 👍

I made the edit here: https://github.com/react-native-webview/react-native-webview/compare/1b03904b3c44b0e31fa7e7108bae9b30c1af1418..857ef17254da7c8c82f583ba0f6736fb36962205

[Ldoppea]

I've also been pondering whether "real" multi-window support could be added (such that the caller of window.open would get a proper reference to the opened window and the opened window could use window.opener), possibly leveraging some of the same ideas as in #2469 for managing multiple WebViews in a dictionary....

But of course that's much more complex and I think there would still be use cases that prefer what you've got here. 🙂

Yes, in my project we have multiple webView that interact with each other. When we encounter a link we want to react based on the link type:

• If the link redirects to another app from our ecosystem, then we want to prevent the navigation and open it in our app using a dedicated react-native route
• If the link redirects outside of our ecosystem, then we want to open it in an InAppBrowser

Those two scenario should work regardless of the link target (simple redirection, new tab or new window). That's why a generic multi-window wouldn't fit our need.

Doesn't yet work on iOS with new architecture

[TheAlmightyBob]

Okay, so:

1. The failure to render the WebView on the iOS New Architecture, Javascript in the Webview is not executed on iOS with new RN architecture from 13.0.0 #3003, and I believe even the crashes on the old architecture all appear to be a regression due to [iOS] Fix webview not loading in background tab #2930. Not related to this PR. (that previous PR was a small change so it was easy to locally revert and get the tests working again)
2. However, with that out of the way, this still doesn't work on the iOS New Architecture yet. Looks like additional changes are required to RNCWebView.mm... this whole file is specific to the new architecture, and there is some boilerplate required there to hook up events now.

[TheAlmightyBob]

@Ldoppea I just added a commit that should get this working with the iOS new architecture and welcome your review of the change.

[o-alexandrov]

Thank you very much, this PR works with react-native@0.72.3 and by installing react-native-webview specifying a commit from this PR (see below). What you see below (the commit hash) is react-native-webview@13.2.3 + this PR's onOpenWindow feature.
In case anyone else wants to test in their apps, use the following format for npm in your package.json:

{
  "dependencies": {
    "react-native-webview": "github:Ldoppea/react-native-webview#667cfec3900560a724c4ad111d4bdbb76f7eba14"
  }
}

[o-alexandrov]

@Ldoppea @TheAlmightyBob Sorry for the ping and being just a tester.
Please be informed, when window.open is triggered in an async function w/ a pause, onOpenWindow in ReactNative won't be triggered.

onOpenWindow is triggered in ReactNative

// React component that's running in a WebView
const Component = () => {
  // "async" directive doesn't break, it still works. It will break in the next case when there's an "await"
  const openWindow = async () => {
    window.open(`https://youtu.be`)
  }
  return <div onClick={openWindow} style={{ width: 100, height: 100, background: "red" }} />
}

onOpenWindow is NOT triggered

// React component that's running in a WebView
const Component = () => {
  const openWindow = async () => {
    const pauseThread = () => new Promise((resolve) => setTimeout(resolve, 1000))
    await pauseThread()
    window.open(`https://youtu.be`)
  }
  return <div onClick={openWindow} style={{ width: 100, height: 100, background: "red" }} />
}

[TheAlmightyBob]

@o-alexandrov Are you seeing this on iOS/Android/both?

Does anything happen?

just a tester

Testing open PRs before they get merged is extremely valuable and appreciated.

[Ldoppea]

Hi,

I think this is a correct behaviour. In classic browsers, window.open() should be called synchronously as they want to limit the opening of popups to being in direct response to user input.

In reallity you can open them asynchronously but there is some "maximum delay" that should occur between user input and window.open() call. However there seems to be no official number about that delay.

I suppose that this behaviour is the same for webviews?

[Ldoppea]

However I'm wondering if we can have control on this using native webview APIs 🤔

[o-alexandrov]

EDIT: @TheAlmightyBob I've tested on Android & iOS. I made a wrong call, there's no bug.

• Created a minimal repro repo to check what happens, if a browser is opened directly on a mobile device, not as a webview (react-native-webview).

Chrome (Android) is fine with a delay of up to 5 seconds, whereas Safari (iOS) can allow a delay of only up to 999ms (1 second).

@Ldoppea I agree with your points and it would be awesome, if you could handle this case; however, since it's not a bug, imho, it's fine to keep the same UX as in the browser.

[TheAlmightyBob]

Thank you both for looking into that and following up

[TheAlmightyBob]

@Ldoppea Thanks for all the work and patience on this one!

[react-native-community-bot]

🎉 This PR is included in version 13.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Ldoppea]

@Ldoppea Thanks for all the work and patience on this one!

Ohh! This GH notification made my day 🎉

Thank you too for all your efforts maintaining this lib 🙂

[jayon-niravel]

Issue
I tested with the latest release but could not open the window inside webview (using android). Can you suggest what I am doing wrong here?

return <WebView
source={{
 uri: `some_randome_url`
}}
            javaScriptCanOpenWindowsAutomatically={true}
            originWhitelist={['*']}
            onOpenWindow={(syntheticEvent) => {
            const { nativeEvent } = syntheticEvent;
            const { targetUrl } = nativeEvent
            console.log('Intercepted OpenWindow for', targetUrl)
            }}
        />;

    The URL "some_randome_url" have below line in the html
    `<a href="https://www.google.com" target="_blank">testing link</a>`
    
    
    Clicking on above link, opens it on external window.

[Titozzz]

Huge thanks to @TheAlmightyBob for taking the time to review / merge

[andophine]

Hi, if the target url in window.open is empty, onOpenWindow event won't be triggered. This is the case, need this feature for writing data to this new window. Thanks

[TheAlmightyBob]

How would you write data to the window if there's no URL open in it...?

[andophine]

How would you write data to the window if there's no URL open in it...?

An example, open the window and use javascript to write data.

function openQR(){  
    mywin = window.open('', "target='_blank', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=no, directories=no, status=yes")  
    mywin.document.write("<p>dynamic QR Code</p>")  
}  

Full html example below

<!DOCTYPE html>
<html>
<head>
    <title>New Window Example</title>
</head>
<body>
    <button onclick="openNewWindow()">Open google</button>
    <p></p>
	<button onclick="openQR()">Open QR</button>
    <script>
        function openNewWindow() {
            window.open("https://www.google.com", "_blank");
        }
        function openQR(){
            mywin = window.open('', "target='_blank', resizable=yes, scrollbars=yes, toolbar=yes, menubar=yes, location=no, directories=no, status=yes")
            mywin.document.write("<p>dynamic QR Code</p>")
        }
    </script>
</body>
</html>