Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Links with target="_blank" do not trigger onShouldStartLoadWithRequest

See original GitHub issue

Bug description:

On Android, elements with target=“_blank” do not trigger onShouldStartLoadWithRequest. Absolute links will immediately open in the browser. Relative links don’t do anything at all (unless you provide a baseUrl, in which case they will be immediately opened in the browser).

To Reproduce: Following example code does not call onShouldStartLoadWithRequest for links with blank target.

import * as React from "react";
import { SafeAreaView } from "react-native";
import WebView from "react-native-webview";
import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";

export default function App() {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          body {
            display: flex;
            flex-direction: column;
          }
        </style>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
      </head>
      <body>
        <a href="https://github.com">Absolute link</a>
        <a href="https://github.com" target="_blank">Absolute link with blank target</a>
        <a href="/react-native-webview">Relative link</a>
        <a href="/react-native-webview" target="_blank">Relative link with blank target</a>
      </body>
    </html>
  `;

  const handleShoudStartLoadingWithRequest = (request: ShouldStartLoadRequest) => {
    console.log("shouldStartLoadWithRequest", request);

    return false;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        originWhitelist={["*"]}
        onShouldStartLoadWithRequest={handleShoudStartLoadingWithRequest}
        source={{ html: htmlContent }}
        style={{ flex: 1, height: 100 }}
      />
    </SafeAreaView>
  );
}

I added the following piece of JS on the page, and then it does work:

<script>
  // Need to remove target=_blank on links or onShoudStartLoadingWithRequest doesnt get called on Android
  Array.from(document.querySelectorAll('a[target="_blank"]'))
  .forEach(link => link.removeAttribute('target'));
</script>

Expected behavior: I expect onShouldStartLoadWithRequest to be called for absolute/ relative links in all cases, irrespective of their target.

Environment:

OS: Android
OS version: 11
react-native version: 0.63.4
react-native-webview version: 11.2.1

Top GitHub Comments

18reactions

B4ckescommented, Feb 22, 2021

I’ve found a better way to make it work, I removed all that previous workaround and set the setSupportMultipleWindows to false, this lead me into two other problems, first was that even if i return a false to the onShouldStartLoadWithRequest the webview was redirected to the next page, so i added a webViewRef?.stopLoading() and all is working fine now. But, the other problem i had was with a vulnerability that setting setSupportMultipleWindows to false exposes, so i just tested if the URL from navigation on included a base URL. I couldn’t make the originWhitelist work, it made a lot of links stop working in the webview even if it matches with the whitelist URIs.

6reactions

toanpv-2417commented, Nov 30, 2021

it solved in my case onShouldStartLoadWithRequest={(request) => {

                    // prevent load request about : blank 
                    if(request.url == 'about:blank') return false;

}

Top Results From Across the Web

React Native - open links in browser - Stack Overflow

I plan to trial and error more to see which holds up best. onShouldStartLoadWithRequest={event => { if (!/^[data:text, about:blank]/.test(event.url)) { Linking.

Don't Use The Target="_Blank" Link Attribute In These Cases

Using the _blank link attribute will cause the link to open in a new browser window or tab. But it is not as...

When to use target="_blank" | CSS-Tricks

I use target="_blank" for all external links. Not every user is tech-savvy enough to know how to open a link in a new...

React Native Webview Onshouldstartloadwithrequest Does ...

Bug description: On Android elements with targetblank do not trigger onShouldStartLoadWithRequest. Absolute links will immediately open. Bug description: On ...

react-native-webview-0x - npm

However, some legacy UIWebView properties are not supported. ... If set to true, links with target="_blank" or window.open will be opened in the...