侦听webview操作以在RN中实现paystack

Question

我正在尝试运行一个webview内部的paystack，但是它有一个叫取消支付的按钮，不做任何事情。有人告诉我，这个按钮运行一个名为onClose的函数，该函数运行window.close，但由于它在work视图中，所以它不起作用。

现在，我正在尝试连接到该函数，理想情况下是创建一个导航操作，但现在只需要一个console.log或警报就足够了。

这是webview现在的样子。

<WebView 
      source={{ uri: authorization_url }}
      onNavigationStateChange={() => console.log('navstate changed')}
      cacheEnabled={false}
      cacheMode={'LOAD_NO_CACHE'}
      onMessage={(e) => {
          console.log('pressed')
          JSON.parse(e.nativeEvent?.data);
      }}
      onClose={() => {
        console.log('on close')
        navigation.navigate(callBackRoute)
      }}
    />

我想添加injectedJavaScript属性，但我不知道该放什么，到目前为止，我已经尝试了一堆东西，但都没有成功。

下面是payfast文档https://paystack.com/docs/guides/using_the_paystack_checkout_in_a_mobile_webview/的链接

更新:我用超时黑客解决了这个问题，我当然更希望找到一种方法来消除超时，并让它正常工作，但以下代码是有效的

const js = `
      setTimeout(function() {
      var buttons = document.getElementsByTagName('button')
      buttons.forEach((button) => {
        if(button.innerHTML.includes('Cancel Payment')) {
          button.addEventListener("click", function() {  
              var resp = {event:'cancelled'};
              window.ReactNativeWebView.postMessage(JSON.stringify(resp))
              });
        }
      })
    }, 3000);
      true; // note: this is required, or you'll sometimes get silent failures
    `

和

const onNavigationStateChange = state => {
    const { url } = state;
    webViewRef.current.injectJavaScript(js)
    // other navigationStateChangeCode
  }

Answer 1

您可以尝试使用window.onload事件，该事件在文档加载完成后触发，而不是设置超时。

​

function onButtonClick() {
  var resp = {event:'cancelled'};
  window.ReactNativeWebView.postMessage(JSON.stringify(resp))
}

window.onload = function() {
  var buttons = document.getElementsByTagName('button');
  buttons.forEach((button) => {
    if(button.innerHTML.includes('Cancel Payment')) {
      button.addEventListener("click", onButtonClick);
    }
  })
}

​