Categories
Development

Detecting URL change in react native webview, injected javascript not loading on pages navigated to

Currently trying to detect URL change of pages in a react native webview to take an action every time a user navigates to a new page within a website loaded in the webview. I am injecting the following javascript, but it only runs on the load page, and doesn’t run on other pages navigated to within the site.

How can I have this javascript snippet running on every page in this site?

The javascript snippet and WebView component:

const App: () => React$Node = () => {
  const injectedjs = `
  let initialUrl = window.location.href;
  window.alert(initialUrl)
  let checkUrlChange = () => {
    document.body.style.backgroundColor = 'blue';
    const currentUrl = window.location.href;
    if(currentUrl !== initialUrl){
      window.alert('nav changed')
      initialUrl = currentUrl;
    }
  }
  setInterval(checkUrlChange, 1000);
  true`

  setTimeout(() => {
    this.webref.injectJavaScript(injectedjs);
  }, 3000);

  return (
    <View style=>
      <WebView
        ref={r => (this.webref = r)}
        javaScriptEnabled = {true}
        source=
      />
    </View>
  );

};

Leave a Reply

Your email address will not be published. Required fields are marked *