根据WebView React Native中正在查看的当前页面注入不同的Javascript

Question

背景

我构建了一个IOS应用程序，该应用程序使用WebView加载网站并通过单击带有Javascript的按钮浏览用户，浏览4页。 我现在正在将该应用程序转换为React Native，并且在第二页加载时，似乎没有触发Javascript。 我以为这是因为丢失了，但是我不确定React Native是否继续在每次加载页面时或仅在加载的第一页上注入javascript，而在客户端重新加载或更改后可能会丢失该页面。

例

const injectedJavaScript: = `
    let currentStep = "login";
    if(currentStep === 'login') {
      document.getElementById('userID').value =  '${
        this.props.username
      }'; document.getElementById('userPassword').value = '${
        this.props.password
      }'; document.getElementById('login').click();
      currentStep = 'agreeToTerms';
    } else if(currentStep === 'agreeToTerms' && window.location.href === "https://www.example.com") {
      currentStep = 'download';
      document.getElementsByClassName('button')[0].click();
    }
    `;


  <WebView
        ignoreSslError={true}
        source={{ uri: "https://www.example.com" }}
        style={{ marginTop: 20, height: 400, width: 400 }}
        injectedJavaScript={injectedJavaScript}
        javaScriptEnabledAndroid={true}
        onError={() => this.webviewError(e)}
        startInLoadingState={true}
        scalesPageToFit={true}
      />

题

请告诉我将特定的Javascript注入WebView的正确方法，具体取决于WebView当前正在查看哪个页面？

在上面的示例中，我显示了2个步骤。 步骤1成功，但是当WebView加载第二页时，Javascript的第二步不成功。

Answer 1

将您的注入脚本更改为

 <WebView
    ignoreSslError={true}
    source={{ uri: "https://www.example.com" }}
    style={{ marginTop: 20, height: 400, width: 400 }}
    injectedJavaScript={injectedJavaScript}
    javaScriptEnabledAndroid={true}
    onError={() => this.webviewError(e)}
    startInLoadingState={true}
    scalesPageToFit={true}
    onLoad={this.updateInjectedJavaScript}
  />

这样，只要您的页面重新加载，它就会执行。