document.getElementById on Scriptable

Hey folks,
Does someone knows how would I get the content of an span id inside a web page from Scriptable? Couldn’t find it on the documentation…

I was able to do it on Shortcuts directly but it just works by running it from the share sheet of Safari, and I wanted to do it from Siri… I think Scriptable would work better for this!

The part I need to replicate with Scriptable is this:
Content = document.getElementById(“codeid”).innerText;

Thank you!

Bear in mind that triggering things via Siri usually means they don’t get input - the exceptions to this are Apple’s own apps such as Reminders, you can say “Remind me of this on Thursday at 4pm” and it will create a link back to wherever you are for that reminder.

That is to say, if you want to do this on different pages you’re probably best off using the share sheet.

2 Likes

Thanks Rose!!

What I’m trying to do is to check always 3 pages of a specific website and get the content of that span ID on each of them, without having to manually open each of the pages to trigger the script by the share sheet… that’s way I though that doing it from Scriptable would work… isn’t that possible?

I suspect that will work, assuming you grab the HTML from the page as the first part of the script - though that would work in Shortcuts too.

I tried that but it says the JavaScript function can only run from the share sheet… trying to do it giving the url and asking for the html returns a conversion error… :frowning_face:
Sorry for the Portuguese on the picture

A URL doesn’t contain HTML :wink:

Add a Get Contents of URL before the Make HTML from Rich Text action and you should be good to go - it’s working here for me!

Nope… same error… I guess that website may have something that won’t allow this kind of request then…
But thanks so much for the help!!

I believe this only works from a share sheet shortcut extension

1 Like

Perhaps once you have the raw HTML use a regular expression match to return the content?

As indicated, JavaScript in Shortcuts will only work via the share sheet which it sounds like you are not using. A similar regex approach on the HTML should be possible in Scriptable as well.

However, if the page is dynamically generated then you may hit a barrier. If the span is added dynamically then it won’t be present in the base HTML. I have a page I check that is built like this after login and so I’m using the share sheet to pass the requisite evaluated content to the shortcut - but it’s just a single page.

1 Like

Got it… I believe that’s the case of this page as well…
Unfortunately, then, it’s seems it’s not possible to do what I need… Thank you all!!

Correct. @benny is right here. In the context that Scriptable is running JavaScript, there is no such thing as a document. A document would correspond to a displayed page in a website but Scriptable doesn’t run JavaScript in the context of a website.

3 Likes

I was really hoping Scriptable would be able to fill this gap that Shortcuts has. I’m trying to write some automation that monitors a page for updates to a specific value (mortgage rate), there is no API, the data is updated in an HTML table. It’s pretty easy to navigate the DOM in javascript to get at the fields I’m interested in even though no rows or cells have ID’s or selectors of any sort but I can’t execute that in Shortcuts or Scriptable, and keep landing back at recommendations for using regex (yuck).
I’ve been searching the forum and this is the closest post I’ve found to the concept - any ideas for parsing/scraping html? I suppose Scriptable’s xml parser could be set against an HTML doc…

1 Like

I’m wondering if Scriptable has the ability to do something like what CURL does: Grab the page.

If you’re really set on using the DOM, once you grab the page content, it is possible, but you’re still likely to end up using regex here and there for things like injecting your JavaScript and to get your results back from however you isolate and present them.

Here’s a Shortcuts custom shortcut that uses some JavaScript to count elements via the DOM.

Hopefully that gives you an alternative to a pure regex based approach.

2 Likes

that was awesome! After your example I was able to do what intended when opening this post with 4 or 5 actions using Shortcuts! Thank you!

You can do what you want in Scriptable!

Just create a WebView, load your url in there and await that. Then use the executeJavascript function (or how it is called) to retrieve the value in the DOM. There you can use the document variable.

2 Likes

That’s right! Scriptable was updated to support evaluation of JavaScript in a web view. Something like the following works.

let url = "https://scriptable.app"
let wv = new WebView()
await wv.loadURL(url)
let js = `
document
  .getElementById("download")
  .getElementsByTagName("a")[0]
  .href
`
let link = await wv.evaluateJavaScript(js)
log("Download Scriptable at " + link)
2 Likes

So that’s effectively doing the CURL thing I mentioned above but also building the DOM tree.

Not having played with it, does it necessarily display the page?

No, as long as you don’t call wv.present() in the script from Simon

1 Like

That’s right :blush:

(Twenty characters :upside_down_face:)

1 Like