Are there different functions to use for revBrowserCEF?

Bringing the internet highway into your project? Building FTP, HTTP, email, chat or other client solutions?

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

Post Reply
lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Are there different functions to use for revBrowserCEF?

Post by lilRalph » Fri Sep 11, 2015 10:27 am

I have been testing revBrowserCEF and Javascript functionality.

My main issue is that there is no way, that I have found yet, to identify that a page has loaded when you call

Code: Select all

put revBrowserOpenCef(tID, theUrl) into tBrowserID 
.
the

Code: Select all

browserNavigateComplete tBrowserID, pUrl
message does come through but the page hasn't loaded yet so calling

Code: Select all

get revBrowserExecuteScript(tBrowserID,"document.title;")
will hang the stack.

Calling

Code: Select all

put revBrowserGet(tBrowserID, "visible") into tVisible
will get the response TRUE but the page still isn't available for a javascript call.

Other than just putting in a

Code: Select all

wait for 5 seconds
(which is a pretty crappy and unreliable thing to do online) is there some other function which tells my script that the page has indeed finished loading and is available for javascript?

I'm running a MacBook Pro 2014 and LiveCode Community Edition 7.0.6

A supplementary question.
The app I am attempting to build I want to run on mobiles as well as desktops, which is why I'm working with LiveCode, am I better off using revBrowser, revBrowserCef or sockets to make the app cross platform?

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Sat Oct 03, 2015 6:20 am

Since there have been no comments on this question and I have been woking on this since then I now have some answers and a sample stack to demonstrate how to use some of the Javascript capabilities. I hope this will help others and perhaps generate some more information from those who know more than I do, not hard.

To answer my initial question, no there are no additional functions for revBrowserCef than there are already for revBrowser that I have found. Not all functions can be used before the page is actually visible.

LiveCode javascript does work in both forms of the browser but the page they see can be quite different. If the called page changes based on the Javascript capabilities of the browser, quite common actually, then revBrowser is seen as without js and revBrowserCef is seen as with js. For simplicity with the Javascript itself only use the revBrowserCef version.

I haven't figured out the embedding of a LiveCode function in a revBrowserCef page yet but calling a Javascript function is pretty easy. Not in the demo but there has to be a Javascript function in the called page for you to be able to call it.

The hardest things to do with Javascript is to click links, checkboxes and radio buttons, this is because the getElementByTags('tag') function returns an array of elements which you then have to search through to pick the one you want. jQuery handles this for you but you may not have jQuery available so I have shown alternative ways with 'standard' Javascript in the demo.

Regardless of which methods you use you have to search the source of the target page to be able to identify which elements you want tp play with. If/when the page is updated your methods will probably break and you'll have to do the search again.

Javascript is difficult to debug because it fails silently. If your code doesn't work you probably won't even get a "script error" message from LiveCode. All that means is that LiveCode thinks it looks like Javascript, not that it's correct.

You'll see that I have an additional field in the card which I have found invaluable, combined with the message window, to see the Javascript I'm actually sending to the web page for well-formed-ness (not a word but it shoud be). It's all about getting the single and double quotes right.

The other very difficult thing to do with logging into a website and navigating within it is handling the session cookies. For this to work you MUST make it appear to the site that you are a real person clicking links etc. The revBrowserNavigate function does not do this for you. In this instance Javascript is your best friend.

Enough rant from me. Questions, comments, praise, criticisms all welcome.
Attachments
webSample.zip
Sample stack and html file
(6.5 KiB) Downloaded 185 times

PaulDaMacMan
Posts: 190
Joined: Wed Apr 24, 2013 4:53 pm

Re: Are there different functions to use for revBrowserCEF?

Post by PaulDaMacMan » Tue Oct 20, 2015 6:16 pm

I appreciate your efforts, I just recently got interested in this and starting to look into using revBrowserCEF because it supports HTML5's Web Audio & Google Chrome's recently added Web MIDI (I'm very keen on ways to get interactive sound & music working in LiveCode)
Check these out:
http://webaudiodemos.appspot.com/midi-synth/index.html
http://webaudiodemos.appspot.com/slides/webmidi.htm
Anyway, thanks for the demo.

MaxV
Posts: 1539
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Are there different functions to use for revBrowserCEF?

Post by MaxV » Thu Nov 05, 2015 10:44 am

http://webaudiodemos.appspot.com/slides/webmidi.htm

Error: Not Found

The requested URL /slides/webmidi.htm was not found on this server. :oops:
Livecode Wiki: http://livecode.wikia.com
My blog: http://livecodeitalia.blogspot.it
To post code use this: http://tinyurl.com/ogp6d5w

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3232
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Are there different functions to use for revBrowserCEF?

Post by bn » Thu Nov 05, 2015 11:17 am

Hi Max,

try
http://webaudiodemos.appspot.com/slides/webmidi.html


@Paul, looks really interesting. Thanks for sharing.


Kind regards
Bernd

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Thu Dec 17, 2015 11:25 am

G'Day Folks,

My apologies for appearing to ignore all of you for the last several months, I have been busy exploring some more of the Javascript functions in a pure Javascript environment and am just now back to see what I can implement in the LiveCode/V8 environment.

Thanks PaulDaMacMan for your kind comment, I am pleased that you have found my demo useful.

I have been using the Brackets development environment for my testing and trials, it's pretty cool as your code changes are automatically updated in the browser window (Chrome) and you actually get Javascript error messages which really help to work out what I screwed up ;) .

What I'm trying to do is access the contents of a dynamically generated iframe which is inside a parent iframe. I have not been able to do it with straight Javascript or even the new mutationObserver function. Doesn't mean it cannot be done but I haven't been able to get it work, yet.

I'm hoping that I can get access to this content with LiveCode.

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Thu Dec 17, 2015 11:43 am

G'Day Again,

Paul I just spent a little time playing with those web audio demos. My musical ability is limited to annoying people with my finger drumming, the comb and the didgeridoo since I broke the last string on my Fender Air Guitar but those tools are amazing.

Nice job.

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Wed Mar 23, 2016 9:59 am

Since the inclusion of a browser widget in Livecode 8 I have been playing with getting the same Javascript to work in that environment.

The widget environment is different but I have found that it is actually easier than using revBrowserCEF and revBrowserExecute().

Buried in the script is a little public function called OnDo which takes Javascript string and passes it off to a private Javascript handler.
You can find it buried in here https://github.com/livecode/livecode/bl ... rowser.lcb at line 653.

It is as easy to use as

Code: Select all

Do "alert('Livecode is great');" in widget "Browser"
Since Javascript cares not a whit about whitespace you can write multiple commands in a single line. A good place to look at Javascript obfuscated by removing the whitespace and renaming functions and variables is the source of Google's start page.

For this exercise though this example works fine, well it does for me using LC 8.0 Dp 16 on a Mac. I have no reason to believe that it wouldn't work for you but let me know if it doesn't.

Code: Select all

Do "var txt = document.getElementById('nav').innerHTML; var res = txt.replace('Lost your password?','<span id=clk>$&</span>');document.getElementById('nav').innerHTML = res;" in widget "Browser"
You don't have to do it this way though, Javascript in your widget remembers the variables you so you can do the same thing this way.

Code: Select all

Do "var txt = document.getElementById('nav');" in widget "Browser"
Do "var res = txt.replace('Lost your password?','<span id=clk>$&</span>');" in widget "Browser"
Do "document.getElementById('nav').innerHTML = res;" in widget "Browser"
As long as each section of Javascript is complete in itself this will work fine.

Which is how you would make the Lost your password? link on a Wordpress login page into a programatically clickable link.
You can click the link like this

Code: Select all

Do document.getElementById('clk').click();" in widget "Browser"
If you know how many links you have on a page and the number of the link you want to change you can do this

Code: Select all

Do "document.getElementsByTagName('a')[1].innerHTML='<span id=clk>Found your password</span>';" in widget "Browser"
If you don't know how many links you have then this will find the one you want.

Code: Select all

Do "var linkz = document.getElementsByTagName('a');" in widget "Browser"
Do "for(var i = linkz.length; i--; ){ var dex = linkz[i].innerHTML; ind = dex.toString().search('Lost your password?'); alert(ind); }" in widget "Browser" 
I haven't yet found something I can't do with Javascript and this Do function but you do need to remember that you have to set the Javascript as strings. Javascript fails silently so you won't get any response if your code fails.

I test in Brackets as I can see the Javascript errors with this tool.

I hope this is useful for you.

mimu
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 40
Joined: Tue Mar 05, 2013 7:00 pm
Location: Berlin
Contact:

Re: Are there different functions to use for revBrowserCEF?

Post by mimu » Mon May 09, 2016 7:32 pm

How can i get the result of a js function in lc8 ?

for example the value of H1

Do "documet.getElementsByTagName('H1')[0]" in widget "Browser"

javmirval
Posts: 9
Joined: Sun Feb 09, 2014 5:55 am

Re: Are there different functions to use for revBrowserCEF?

Post by javmirval » Sat May 28, 2016 5:57 am

Ufff! Still trying to understand this post, the only thing I know is that I must learn the LC / JavaScript combination.
Friends, any stack samples will help a lot, the current documentation is not really helpfull specially considering the lack of some stacks showing steps of progressive complexity.

For instance, I would like to know how to use LeafletJS with LiveCode.

Thank you for sharing.

Saludos,

Javier

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Thu Jun 02, 2016 3:54 pm

I made a little stack for loading various files and added a way to test Javascript snippets.

Perhaps I should have added it to this thread but I made a new thread for it here http://forums.livecode.com/viewtopic.php?f=11&t=27127

Since then I worked out how to use the Javascript Handler, by following the example (who knew that would work?), and will try to give a heads-up on it.

Firstly it works superbly well and allows you to pass information from your Javascript to LiveCode as the example says.

OK, some code:

Code: Select all

on getContent tContent
   put tContent
end getContent
This is your Javascript Handler. We are going to get the content (source) of a web page, any web page, and put it into the message box.

Make a single card stack, put a field and a button at the top, put the browser widget as big as you like on the rest of the card.

Put the above code into the card script.
Put this code into the browser widget script

Code: Select all

on BrowserDocumentLoadComplete pUrl
   set the javascriptHandlers of widget "Browser" to "getContent"   
   send "doStart" to me in 1 millisecond
end BrowserDocumentLoadComplete

on doStart
         answer the javascriptHandlers of widget "Browser"
      Do "var doc = document.body.innerHTML;" in widget "Browser"
      Do "liveCode.getContent(doc);" in widget "Browser"
end doStart
put this code into the button script

Code: Select all

on mouseUp
   put text of field "Field" into tUrl
   set URL of widget "Browser" to tUrl
end mouseUp
When you type a url into the field and click the button the browser widget is passed the url and goes there.
When the page loads the javascript handler is loaded. This is important as the handler is lost with each change of page so you have to load it in every page you want to use it in.

The doStart function shows you that the handler is indeed loaded, runs a bit of Javascript to get all the source code of the web page and puts it in a variable.
The handler is then called and passed the Javascript variable. The LiveCode function puts the content of the web page into the MessageBox.

The zip file contains the stack I made which does just that.
Attachments
Untitled 1.livecode.zip
Simple stack to demonstrate using Javascript Handlers
(1.25 KiB) Downloaded 147 times

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Thu Jun 02, 2016 4:05 pm

Sorry, meant to also address the question from Javier about using Leaflet.js in LiveCode.

You don't. You add the javascript framework, script or whatever in your web page as you would normally.
The browser widget is a web browser that you can code and manipulate not a web server.
However, if you would like to set up your own page with an iframe then you can load other peoples web pages into your page but the Javascript will probably not work as it is structured to be sandboxed and prevent cross-domain coding.
mimuBUSkYgY wrote:How can i get the result of a js function in lc8 ?

for example the value of H1

Do "documet.getElementsByTagName('H1')[0]" in widget "Browser"
You need to use the Javascript handler as demonstrated in the above attached stack to extract the text but first you have to put the text into a variable like this.

Code: Select all

do "var txt = document.getElementsByTagName('h1')[0];"
Don't forget the semicolon, the Javascript won't work without it

Then you can pass the variable to the handler and use it in your LC script.

UKMC
Posts: 50
Joined: Sun Jan 08, 2017 12:01 pm

Re: Are there different functions to use for revBrowserCEF?

Post by UKMC » Sun Feb 26, 2017 3:33 pm

Hi lilRalph,

I just found your post below which was referenced from a thread which dealt with simulating/creating a mouseclick to the browser widget's content.
As I have no knowledge about Java and javascript and it seems to me that you are an expert - would you be so kind to provide an example how to produce a click to the widget's content ?

This would be so nice and very helpful to me

Best regards and thanks in advance


Ulrich


P.S.:

Do you perhaps have an idea to my post with the topic "Using QR-decoding Webservices" ??
I could imagine this would be an issue which could be solved quite straight forward by you...

lilRalph wrote:Since the inclusion of a browser widget in Livecode 8 I have been playing with getting the same Javascript to work in that environment.

The widget environment is different but I have found that it is actually easier than using revBrowserCEF and revBrowserExecute().

Buried in the script is a little public function called OnDo which takes Javascript string and passes it off to a private Javascript handler.
You can find it buried in here https://github.com/livecode/livecode/bl ... rowser.lcb at line 653.

It is as easy to use as

Code: Select all

Do "alert('Livecode is great');" in widget "Browser"
Since Javascript cares not a whit about whitespace you can write multiple commands in a single line. A good place to look at Javascript obfuscated by removing the whitespace and renaming functions and variables is the source of Google's start page.

For this exercise though this example works fine, well it does for me using LC 8.0 Dp 16 on a Mac. I have no reason to believe that it wouldn't work for you but let me know if it doesn't.

Code: Select all

Do "var txt = document.getElementById('nav').innerHTML; var res = txt.replace('Lost your password?','<span id=clk>$&</span>');document.getElementById('nav').innerHTML = res;" in widget "Browser"
You don't have to do it this way though, Javascript in your widget remembers the variables you so you can do the same thing this way.

Code: Select all

Do "var txt = document.getElementById('nav');" in widget "Browser"
Do "var res = txt.replace('Lost your password?','<span id=clk>$&</span>');" in widget "Browser"
Do "document.getElementById('nav').innerHTML = res;" in widget "Browser"
As long as each section of Javascript is complete in itself this will work fine.

Which is how you would make the Lost your password? link on a Wordpress login page into a programatically clickable link.
You can click the link like this

Code: Select all

Do document.getElementById('clk').click();" in widget "Browser"
If you know how many links you have on a page and the number of the link you want to change you can do this

Code: Select all

Do "document.getElementsByTagName('a')[1].innerHTML='<span id=clk>Found your password</span>';" in widget "Browser"
If you don't know how many links you have then this will find the one you want.

Code: Select all

Do "var linkz = document.getElementsByTagName('a');" in widget "Browser"
Do "for(var i = linkz.length; i--; ){ var dex = linkz[i].innerHTML; ind = dex.toString().search('Lost your password?'); alert(ind); }" in widget "Browser" 
I haven't yet found something I can't do with Javascript and this Do function but you do need to remember that you have to set the Javascript as strings. Javascript fails silently so you won't get any response if your code fails.

I test in Brackets as I can see the Javascript errors with this tool.

I hope this is useful for you.

lilRalph
Posts: 23
Joined: Wed Aug 26, 2015 9:43 am

Re: Are there different functions to use for revBrowserCEF?

Post by lilRalph » Thu Jul 20, 2017 12:52 pm

G'Day Ulrich, firstly let me apologise for such a slow response to your question. As you probably realised I was away from the forum doing other things and then I had a small industrial accident, details at http://brentmilne.com if you are interested. Add a couple of grandchildren, work, other illness and I haven't done much programming lately.

Enough excuses. No I'm not a Java or Javascript expert - they are not the same or even related.

I have done quite a lot with Javascript over the years and, as I mentioned in the post you referenced, I also use a program called Brackets to test my Javascript.

In that referenced section are the instructions on how to make a link clickable with Javascript inside a browser widget.
It isn't necessary to convert a link though, you can write your own link into the page if you want to.

Anyway, I'll hang about this forum for a while in case you still need some help.

Post Reply

Return to “Internet”