Insert and retrieve TextArea from WebHTMLViewer

I have a test WebApp (not desktop — that I can do!) with a WebHTMLViewer that points to a URL on my web site (http://www.webappdevelopments.com/textarea.html). It contains the following HTML (a form with a TextArea):

[code]

TextArea Test [/code]

How can I place some text into this TextArea or retrieve the text from the TextArea?

Adding text
I have tried myHTMLViewer.ExecuteJavaScript(“formtest.editor1.setData(’” + myTextArea.Text + “’”) but it gives a JavaScript error in the browser

Retrieving text
I have no idea at all on how to retrieve the TextArea text since I cannot return a value from an ExecuteJavaScript(…).

I have set up a sample Xojo WebApp for testing if you’d like to give it a try. I am happy to change the web HTML file or drop up your version if needed.

https://www.w3schools.com/jsref/prop_frame_contentdocument.asp

@Michel Bujardet On that page it changes the background of the iFrame to red, yet this gives a JavaScript error:

myHTMLViewer.ExecuteJavaScript("document.getElementById('" + myHTMLViewer.ControlID + "').contentDocument.body.style.backgroundColor = ""red"";")

I have tried dozens of combinations of getElementById and getElementsByTagName with the form name and TextArea name, but all give errors. I can change values on the WebPage using ExecuteJavaScript(…), but not on the WebHTMLViewer.

In terms of retrieval, I’m having trouble getting an alert(…) to display the contents of the TextArea too.

Is it possible to open an HTTPSocket into your own WebHTMLViewer?!

By chance, is the iFrame displaying a page that’s not on your server?
Could you tell us exactly what the Javascript error is?

@Tim Parnell There is no chance since in the Open event of the WebApp I have the command:

me.URL ="http://www.webappdevelopments.com/textarea.html"

In the sample app, if I use the command:

tempString = "document.getElementById('" + myHTMLViewer.ControlID + "').contentDocument.body.style.backgroundColor = 'red';"

I get the error:

Right, but is the WebApp also on www.webappdevelopments.com ?

Are you using this ExecuteJavascript in the Shown event of the WebHTMLViewer? If the page within the iFrame hasn’t loaded yet you won’t be able to get the contentDocument.body object, and it could result in the undefined is not an object error you are seeing.

No, I am running the WebApp in the IDE. Why, should that matter?

I am running the ExecuteJavascript(…) when I click on a button, so everything should be fully loaded, certainly the web page is viewing in the WebHTMLViewer OK and I am using this to verify if the ExecuteJavascript() is working. It looks like this, where the text area and buttons above are in the WebApp and the WebHTMLViewer is below this with it’s TextArea visible, surrounded with a grey border:

Security settings in browsers prevent the page from mucking with pages inside iFrames on a different domain.

See the note here: HTML DOM IFrame contentDocument Property
(thanks, Michel)

[quote=334667:@David Cox]@Michel Bujardet On that page it changes the background of the iFrame to red, yet this gives a JavaScript error:

myHTMLViewer.ExecuteJavaScript("document.getElementById('" + myHTMLViewer.ControlID + "').contentDocument.body.style.backgroundColor = ""red"";")

I have tried dozens of combinations of getElementById and getElementsByTagName with the form name and TextArea name, but all give errors. I can change values on the WebPage using ExecuteJavaScript(…), but not on the WebHTMLViewer.

In terms of retrieval, I’m having trouble getting an alert(…) to display the contents of the TextArea too.

Is it possible to open an HTTPSocket into your own WebHTMLViewer?![/quote]

You don’t understand. Your HTML is at iFrame.contentDocument. You must modify your JavaScript to take that into account in locating the TextArea.

May I recommend you use the browser developer tools to see the elements involved.

All I want is a WebApp where I can display a standard WebHTMLViewer, insert some text into certain text fields, allow users to change the field data, then retrieve the text that they entered in.

I can tell the ExecuteJavaScript to find the document.getElementById(…) of the WebHTMLViewer, but seem unable to look inside it (e.g. to get/set the texture text) or even set it’s characteristics (e.g. give it a red background). It may be that I need to run the WebApp on the same domain as the HTML, but the JavaScript errors seem to indicate I am not referring to the objects properly, thus my call for help!

I used the .contentDocument.body… because the web link suggested this was the way to manipulate an iFrame element.

What you think is an iframe is a div. The iframe in an HTMLViewer is child. Look at the page with developer tools.

Even if we’re at the wrong DOM element, what he wants to do still cannot be done across domains.

Indeed. He should use a local WebFile instead.

@Michel Bujardet I tried using a local file originally and it displayed a blank (see below), that’s why I tried to place the HTML file on my server.

I am assuming you mean to include the HTML file with the application then set the WebHTMLViewer (in the Open Event) to use the file using:

   mHTMLViewer.URL = f.URLPath


Is this correct?

See http://documentation.xojo.com/index.php/WebFile

Excuse my ignorance, but how does this help since I don’t need to download a file from the website?

You don’t download. You cannot do what you posted because the app does not make the disk space available to the Internet from a standalone app.

Create a WebFile, do not set it’s force download, and use its URL.

From the example of Open :

Dim f As FolderItem = GetFolderItem("MyFile.html") // Get the file using a FolderItem If f <> Nil And f.Exists Then // Convert the FolderItem to a WebFile App.MyFile = WebFile.Open(f) // MyFile is a property on the App object HTMLViewer1.URL = App.MyFile.URL End If

David,

What you want CAN be done but it’s not as simple as it seems. Browsers restrict this behavior specifically to prevent certain kinds of attacks and behaviors. For example you would not want a web app to masquerade as your bank website but secretly contain an iframe to your actual bank, capture your username/password and then fill them in on the iframe and wreck havoc on your accounts. To prevent this the browser does not permit one web site from seeing the data of another website across domains.

Fortunately you can execute any valid javascript against another website in an iframe. What you must do is pass messages to it. See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

To SET the text in the HTML page the HTML page must create a function that sets the values necessary and then have an event listener to listen for events. You then pass a message to it with the javascript you want executed or the values of the text you want set depending on how you design your functions/listener.

To GET the text in the HTML page you want to add an event listener to your Xojo web app. You then want to use the event listener from above to send a message to the iframe HTML webpage to send a message back to the Xojo web app with the contents of the textfield.

So YES it can be done.

To clarify (because I almost just freaked the fuck out) the document within the iFrame must be listening for your messages. So if you do not control the content of the iFrame, you still cannot control the page. Huuuge relief there.

So if this is just a test, to get the basics of manipulating another page in a HTMLViewer/iFrame, keep in mind that if you are not in control of the page within the iFrame that this will not work.

In the long run, it would be simpler just to include the HTML as a WebFile as Michel suggested. The web app would then be self contained, and you wouldn’t have to set up the listeners on the inner page.

Indeed ; all he would have to do to update is to generate and load a new HTML. That would be the simplest.

Actually, he could do that with LoadPage.