When dealing with a website that uses a ReactJS app, traditional methods like evaluateJS may not work effectively. In such cases, utilizing WKScriptMessageHandler could be a better approach.
To achieve similar functionality in the browser, consider the following code snippet:
const element = document.querySelector("input#receipt_number");
const propertyNames = Object.keys(element);
let reactProps;
for (const propName of propertyNames) {
if (propName.startsWith('__reactProps$')) {
reactProps = propName;
break;
}
}
if (reactProps) {
const onChangeHandler = element[reactProps]?.onChange;
if (typeof onChangeHandler === 'function') {
const event = {
target: {
value: "abc1234567891", // enter your custom values here
},
};
onChangeHandler.call(element, event);
const buttonElement = document.querySelector("button[type='submit']");
if (buttonElement && buttonElement[reactProps]?.onClick) {
buttonElement[reactProps].onClick({preventDefault:()=>{}});
}
}
}
It is essential to customize the value and adjust the code based on specific requirements.
**Update : **
For a recommended approach using WKScriptMessageHandler, consider the following sample code:
import WebKit
class MyScriptMessageHandler: NSObject, WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// Handle the message received from JavaScript
if let messageBody = message.body as? String {
// Perform actions based on the message content
if messageBody == "triggerEvent" {
// Trigger React event or modify component state here
if let element = webView.evaluateJavaScript("document.querySelector(\"input#receipt_number\")") as? WKScriptValue,
let reactProps = (element.propertyNames.first { $0.hasPrefix("__reactProps$") }) as? String,
let onChangeHandler = element.valueForKey(reactProps + ".onChange") as? WKScriptValue {
let event = webView.evaluateJavaScript("new Event('change')") as? WKScriptValue
onChangeHandler.call(withArguments: [event])
}
if let buttonElement = webView.evaluateJavaScript("document.querySelector(\"button[type='submit']\")") as? WKScriptValue,
let reactProps = (buttonElement.propertyNames.first { $0.hasPrefix("__reactProps$") }) as? String,
let onClickHandler = buttonElement.valueForKey(reactProps + ".onClick") as? WKScriptValue {
onClickHandler.call()
}
}
}
}
}
// Create the WKWebView configuration
let webConfiguration = WKWebViewConfiguration()
// Create an instance of your custom script message handler
let scriptMessageHandler = MyScriptMessageHandler()
// Add the script message handler to the user content controller
webConfiguration.userContentController.add(scriptMessageHandler, name: "myMessageHandler")
// Create the WKWebView with the configuration
let webView = WKWebView(frame: .zero, configuration: webConfiguration)
// Inject the JavaScript code into the WKWebView
let javascriptCode = """
// Add an event listener to trigger the message to the native code
document.querySelector("button").addEventListener("click", function() {
window.webkit.messageHandlers.myMessageHandler.postMessage("triggerEvent");
});
"""
let userScript = WKUserScript(source: javascriptCode, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
webView.configuration.userContentController.addUserScript(userScript)
// Load your desired URL in the WKWebView
if let url = URL(string: "https://egov.uscis.gov/") {
let request = URLRequest(url: url)
webView.load(request)
}
Caution : Use this code responsibly and avoid any automation that may compromise site validation processes or engage in illegal activities.