HTMLViewer JavaScript not running

Can anyone explain to me why this doesn’t work?

I have an HTMLViewer, and I’ve loaded a web page in it using LoadURL.

Now I want to try to run some JavaScript, but nothing seems to execute. For example:

HTMLViewer1.ExecuteJavaScript("alert('foobar');")
Has no effect.

What I’m actually trying to do is something like this:

document.selection.innerHTML = "testing"
but that doesn’t work either.

As a side note, I’ve also tried the MBS “EvaluateJavaScriptMBS” method, with also no results.

What am I doing wrong?

Xojo 2017r3 64 bit, macOS 10.12.6, MBS 17.5

Thanks!

Update: JavaScript IS apparently working, as I can do things like this on the Xojo home page:

HTMLViewer1.EvaluateJavaScriptMBS("document.getElementById('section-about').className")
which returns (correctly) “section-padding”

So maybe alerts are blocked?

Is DOM modification blocked as well?

I heavily use DOM manipulation, so that shouldn’t be blocked…

OK, I guess I need to go back to JavaScript 101 and figure out what I’m doing wrong. I agree DOM manipulation works, because I just created a simple page with a paragraph that had an id, and I was able to set the innerHTML of that paragraph.

I just can’t seem to get the selection for some reason.

This works.

[code]dim replacementText as string = “testing”

dim js as string = “var range = window.getSelection().getRangeAt(0);” +_
“range.deleteContents();” +_
“var el = document.createElement(‘div’);” +_
“el.innerText = '” + replacementText + “’;” +_
“var frag = document.createDocumentFragment(), node, lastNode;” +_
“while ( (node = el.firstChild) ) { lastNode = frag.appendChild(node); }” +_
“range.insertNode(frag);”

HTMLViewer1.ExecuteJavaScript(js)[/code]

@Jared Feder : excellent, that works! Thank you!

You’re welcome. I didn’t come up with the code, but it bothered me that it wasn’t as easy as it should be.

The solution is from here: https://www.codeproject.com/Questions/897645/Replacing-selected-text-HTML-JavaScript
Modified and simplified this code (which bolds selected text): https://jsfiddle.net/dKaJ3/1261/

More in the continuing saga of JavaScript issues with HTMLViewer (desktop):

If I take this HTML:

[code]

Test javascript

Click me [/code] and save it to a web server (or a local file) and then tell HTMLViewer to load it, clicking the button has no effect.

It works in Safari, so I would think it should work in HTMLViewer, but no.

I’ve also tried using Christian’s MBS method:

HTMLViewer1.preferencesMBS.isJavaScriptEnabled = true
Which seems to have no effect.

Any thoughts?
Thanks!

Xojo 2017r3, MacOS 10.12.6

You can’t use Javascript alert() in Desktop HTML Viewers because Xojo didn’t implement a way to handle it.

Try something like <button id="itsa-unique" onclick="document.getElementById('itsa-unique').innerHTML = 'Test';">Click me</button>. I wrote that in the post editor on the forum, but it should work.

Thanks Tim,

Does that mean you can’t use HTML5 elements either?

Honestly, I hadn’t ever heard of a element before. Quick google led me to this JSFiddle: https://jsfiddle.net/df0qahf5/

In Safari it looks like a

does (it’s not opening any special elements or dialogs) so I think it should work. Worst case scenario, give it a try ¯\(?)

Edit: got a real jsfiddle link

Edit 2: Reading how it’s supposed to work, I don’t think it will behave as you desire.

Edit 3: See compatibility chart: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
The two browsers you need it to work in don’t support it.

You’re right. HTML with a element works fine in Chrome but does not work in Safari (and thus, not in the webkit used by Xojo). Dang. Gotta love standards.

It is a relatively new introduction.

@Tim Parnell : you seem to be pretty JavaScriptXojo™ savvy. Do you know if it’s possible to communicate back to Xojo from a page that’s loaded into an HTMLViewer? Ideally I’d like to have a button, either in the HTML page (that runs a JavaScript), or a button on the Xojo layout, that can go in and get the values of an HTML form and return them to Xojo.

I can’t use the normal submit form behavior, because there’s nothing really to submit to since this is running in a desktop app (and the HTML has been created in that desktop app, so there’s no web server at all).

Thanks.

@Michel Bujardet , thanks for that URL, but I don’t think it will work for me. I have two separate use cases, one for a desktop app, and one for a web app. In both cases, the HTMLViewer or WebHTMLViewer is only one piece of the UI; its display doesn’t depend on the browser URL changing, so HashTagChanged isn’t going to help.

I can fire a Xojo action from the desktop HTMLViewer by setting document.title using a JavaScript, and thus firing the HTMLViewer’s TitleChanged event. Having that event, I now need to figure out a way to get a JavaScript (or Xojo) to loop over the DOM and return to Xojo each element’s value.

In a WebHTMLViewer, there is no such TitleChanged event, so right now I’m stumped as to how to get an event to Xojo.

@Michel Bujardet: I really DO appreciate your help, and all the help you provide on this forum. I am sorry if my comments were seen as negative. I will try your suggestion regarding WebSDK controls.

Thank you again.

Okay, this is why I really wish Xojo would show posts that were deleted, this thread got really confusing with deleted posts.

I’m not sure what he said, but it seems like he mentioned the HTMLViewer.TitleChanged trick for getting data out of Desktop HTML Viewer. Web HTML Viewer is an iframe, which I’m not sure you should use. If you’re designing the form, look into the WebSDK documentation in the Extras folder. Custom web controls are far more reliable than anything you hack together with a WebHTMLViewer.

Unfortunately it does seem like you are going to need two different implementations.

That’s about as much as I can help without knowing more specific details about what you’re doing with the form / it’s data. Different end goals will have different best implementation methods.

Having posts disappear is indeed kind of confusing, but whatever. I didn’t mean to offend anyone.

Anyway, the way this is supposed to work is as follows:

  1. Xojo gets some JSON data from a web API. The JSON describes a data entry form (with far more detail than is needed for an HTML form).
  2. Xojo creates an HTML page out of that JSON. It’s not a simple transformation; there’s logic involved in what gets into the HTML.
  3. Xojo displays the HTML page in a HTMLViewer or WebHTMLViewer control, which is a form (plus a whole bunch of
    stuff due to lack of support for the HTML element).
  4. The user fills in the form and presses a “submit” button.
  5. Xojo uses some of the submitted data locally, and some is transmitted in a separate POST to the API host.

I think I’ve figured out how to do everything EXCEPT figure out when the user clicks a button on the form in the WebHTMLViewer. My next trick will be to try to use ExecuteJavaScript on the WebHTMLViewer, with that javaScript being triggered by a button on the Xojo web page (not an HTML button inside the WebHTMLViewer).

It hurts my head to write about this. I am SO close to dropping Xojo for this particular app and moving the whole thing to something like React.

You can’t dive into a WebHTMLViewer in that way because it’s an iframe which is a security thing with web browsers. I can imagine a process that should work for Desktop, but I’m not thinking it will be possible with the Web framework.

If someone has an idea how to hack this together in Web I would love to read about it.

Ok, I’m really confused. Are you like looking for a solution for Desktop HTMLViewer or WebHTMLViewer?