Unable to get DOM element that is loaded dynamically

Question

I have some entry level JavaScript experience, and I’ve been trying to get a script to login and click some buttons on a website, but have reached a tough hurdle where I am unable to find an element using document.getElementByID() or document.contains() and remove it using .remove() .

With each, the console returns the element as “null”. I have tried setTimeout, which does delay properly, but the DOM nodes I’m interested in removing only appear after I present the web view.

See my code below (code that is specific to website has been removed for confidentiality):

var wv = new WebView();
await wv.loadURL("loginwebsite.com");

await wv.evaluateJavaScript(`

var emailTextBox = document.getElementById("username");
emailTextBox.value = "xxxxxx"

var pwTextBox = document.getElementById("password");
pwTextBox.value = "yyyyyy";

var submitBtn =
document.querySelector("body > form > div.ping-buttons > a");

submitBtn.click();`);

await wv.waitForLoad();

await wv.loadURL("SecondWebsite.com");

await wv.waitForLoad();

await wv.evaluateJavaScript(`function removeDivs () {
var divOne = document.getElementById('mydialog');
var divTwo = document.getElementById('mydialog-cover');
divOne.remove();
divTwo.remove();

}

setTimeout(removeDivs, 5000);`);


await wv.present(fullscreen=false);

I also tried a different technique for waiting for the elements to appear before trying to remove them, as shown below:

await wv.evaluateJavaScript(`function removeDivs () {
var divOne = document.getElementById('mydialog');
var divTwo = document.getElementById('mydialog-cover');
  if (document.body.contains(divOne)) {
divOne.remove();
  } else {
  setTimeout(removeDivs, 300); 
}
  if (document.body.contains(divOne)) {
divTwo.remove();
  } else {
  setTimeout(removeDivs, 300); 
}
}

removeDivs();`);

Neither work as anticipated. When the web view presents, even after a 5 second timeout, the original webpage’s JavaScript THEN runs on the page, and the divs I’m looking for are created.

Perhaps there is a way I can present the web view, let the elements populate dynamically, then evaluate my JavaScript to remove the divs? Or maybe there is something simple I am missing.

In any case, thank you all in advance. I’ve been stuck on this issue for days now. And please bear with me, I’m still learning about scriptable.

Answer 1

Correct me if I'm wrong, but it looks like you are trying to remove a modal pop-up of sorts. This may not work, but have you tried injecting a CSS style tag to hide the elements instead of removing them with JavaScript? This way, the style should be applied whenever the elements are loaded. Setting the "display" property to "none" should remove the element. The "!important" property should help override the current style, but may not be necessary.

I don't have an iOS device nor the website in question to play around with ideas, so this is a shot in the dark. I was going to comment instead of posting an answer, but my rep is too low.

If you haven't tried it out and want to give it a shot, you should be able to add the following to evaluateJavaScript().

var style = "#mydialog, #mydialog-cover{ display: none !important; }";
var styleEl = document.createElement("style");
styleEl.innerText = style;
document.head.appendChild(styleEl);

Either way, good luck and cheers!