Page 1 of 1
Programatically Control Browser Widget
Posted: Wed Mar 08, 2017 1:25 am
by icouto
Hi all,
Long time absent from LiveCode. Just downloaded the latest stable version (8.1.3), and have been playing with the new 'Browser' widget. Sure makes it easier to add a browser viewport to projects, but apart from setting the URL to be displayed, and whether we want scrollbars or not, there doesn't seem to be a lot of ways to control it programatically.
Is it possible for us to do the following?:
* get the 'formattedHeight' of the widget - i.e., the height of the entire web page being displayed
* scroll up/down - i.e., set the 'vScroll'?
Many thanks in advance for pointing me in the right direction.
Re: Programatically Control Browser Widget
Posted: Wed Mar 08, 2017 4:56 pm
by jacque
Do browsers even have a formattedheight? They are zoomable and can be any size.
Re: Programatically Control Browser Widget
Posted: Wed Mar 08, 2017 8:25 pm
by [-hh]
A browser widget is not an ordinary control, but is powered by javascript.
You are asking for values that are determined by the content (HTML page) which is formatted by the widget's engine to the bounds of your widget's size. So you can use javascript to get what you want.
This is now an example for
- how to use "the javascriptHandlers" of a browser widget,
- how to use elementary javascript functions, here:
- Get the content's size, formatted according to your browser's size.
- Get the current scroll (hscroll,vscroll)
- Set the current scroll (hscroll,vscroll) absolute (='scrollTo')
- Set the current scroll (hscroll,vscroll) relative (='scrollBy')
(The following script is my scripting style. Of course there are other possibilities to script this.)
Put in the card's script:
Code: Select all
on openCard
set the javascriptHandlers of widget "browser" to "jsGetValues"
end openCard
-- usage: do jsGetDimen() in widget "browser"
function jsGetDimen
return "liveCode.jsGetValues('dimen'," & \
"document.getElementsByTagName('body')[0].clientWidth," & \
"document.getElementsByTagName('body')[0].clientHeight)"
end jsGetDimen
-- usage: do jsSetScroll(0,200) in widget "browser"
function jsSetScroll v,h
return "window.scrollTo("& (v,h) & ")" in widget "browser"
end jsSetScroll
-- usage: do jsScrollBy(0,50) in widget "browser"
function jsScrollBy v,h
return "window.scrollBy("& (v,h) & ")" in widget "browser"
end jsScrollBy
-- usage: do jsGetScroll() in widget "browser"
function jsGetScroll
return "liveCode.jsGetValues('scroll',window.scrollX,window.scrollY)"
end jsGetScroll
-- handles the return from the browser
on jsGetValues pType,x,y
replace "false" with "0" in x; replace "false" with "0" in y
switch pType
case "dimen"; put (x,y) into fld 1; break
case "scroll"; put (x,y) into fld 2; break
default; put "error"
end switch
end jsGetValues
Example usage (for a button).
Code: Select all
on mouseUp
do jsGetDimen() in widget "browser"
-- do jsSetScroll(20,120) in widget "browser"
do jsScrollBy(5,5) in widget "browser"
do jsGetScroll() in widget "browser"
end mouseUp
Re: Programatically Control Browser Widget
Posted: Thu Mar 09, 2017 9:27 am
by icouto
Thank you for your extremely comprehensive and helpful response, @[-hh]!