I would like run my javascript codes only when the website I am targeting has finished running these pieces of javascript scripts:
I am building an application in react native and would like to implement paystack payment gateway.
I used React Native WebView and injectJavascript
method. The issue is that the script runs when the website is still on loading state. My javascript code would like to get the buttons on the webpage and listen to click
event. However, on loading state, the targeted button element won’t be available, hence the JS code finds nothing. Take a look at this screenshot:
I would like to run the script after apploader
has been removed. Once apploader
element has been removed, the button element I am targeting would be available for selection. Currently, I am using setTimeOut
to wait for the apploader
to completely run and removed from the node.
This is not best practice because if the apploader
delays further due to poor network, etc, the setTimeOut which I set at 3000
would trigger while the elements I targeted are not ready yet. This will make my code not to work.
How can I run my code after the apploader
has successfully removed from the page?
Here is the code that I wrote with setTimeOut
:
const handleCancleScript = `
setTimeout(function() {
const buttons = document.getElementsByClassName("text")
for(let button of buttons){
const resp = button.textContent
if(resp == "Cancel Payment"){
button.addEventListener("click", function() {
var response = {event:'cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(response))
});
}
}
}, 3000);
true;
`