根據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}
  />

這樣，只要您的頁面重新加載，它就會執行。