Do javascript function in browser widget?

Discussion:

Keith Clarke via use-livecode

2018-11-06 09:10:59 UTC

Folks,
I’ve found a few examples of simple inline script injection to the browser widget, such as do "document.body.style.background = ‘red';" in widget "Browser”

Is it possible to inject a multi-line javascript function - with variables definition, loops, etc - in this fashion or would the function need to be injected into the page within the browser as markup and then called from a one-line script from LiveCode?

Thanks & regards,
Keith

Andre Alves Garzia via use-livecode

2018-11-06 10:38:32 UTC

Permalink

Keith,

If you're in control of the HTML used in the widget, then I'd advise you
to build functions inside the HTML and just call them from LC instead of
executing script directly, such as:

---- in the html ----

<html>

<head>

...

   <script>

   function paintItRed() {

     document.body.style.backgroundColor = "red";

   }

   </script>

</head>

<body>

...

</body>

</html>

-------------------

Then in the LC part you can do something like:

do "paintItRed()" in widget "Browser"

Which is more readable. Also, the body of the function inside the HTML
can be as complex as you want. Now, if you're not in control of the
HTML, I'd opt for some out-of-the-box strategy where you have the LC
HTTPD library serving the JS content and then use the LC "do .. in
widget" form to add a new <script> tag with the "src" attribute pointing
to the HTTPD library server, the script would load and execute in the
context of the loaded page. This should only be done after the page is
loaded though or your script risks executing before the HTML is complete.

Be aware that you can use the "do in widget" form with complex scripts,
but I'd rather use the form above which keeps the JS and LC separate
which is more of a personal preference than a technical reason to be honest.

om om

andre

Post by Keith Clarke via use-livecode
Folks,
I’ve found a few examples of simple inline script injection to the browser widget, such as do "document.body.style.background = ‘red';" in widget "Browser”
Is it possible to inject a multi-line javascript function - with variables definition, loops, etc - in this fashion or would the function need to be injected into the page within the browser as markup and then called from a one-line script from LiveCode?
Thanks & regards,
Keith
_______________________________________________
use-livecode mailing list
http://lists.runrev.com/mailman/listinfo/use-livecode

Keith Clarke via use-livecode

2018-11-06 10:47:35 UTC

Permalink

Thanks Andre for the detailed response and HTTPD library steer - that’s new to me so I shall review with interest. :-)

I’m not in control of the pages, so that may be more useful than my first experiments - which were to download the page content into LC, add some markup and load the HTML text into the browser widget as a local ‘offline’ page.
Best,
Keith

Post by Andre Alves Garzia via use-livecode
Keith,
---- in the html ----
<html>
<head>
...
<script>
function paintItRed() {
document.body.style.backgroundColor = "red";
}
</script>
</head>
<body>
...
</body>
</html>
-------------------
do "paintItRed()" in widget "Browser"
Which is more readable. Also, the body of the function inside the HTML can be as complex as you want. Now, if you're not in control of the HTML, I'd opt for some out-of-the-box strategy where you have the LC HTTPD library serving the JS content and then use the LC "do .. in widget" form to add a new <script> tag with the "src" attribute pointing to the HTTPD library server, the script would load and execute in the context of the loaded page. This should only be done after the page is loaded though or your script risks executing before the HTML is complete.
Be aware that you can use the "do in widget" form with complex scripts, but I'd rather use the form above which keeps the JS and LC separate which is more of a personal preference than a technical reason to be honest.
om om
andre

_______________________________________________
use-livecode mailing list
http://lists.runrev.com/mailman/listinfo/use-livecode

hh via use-livecode

2018-11-06 10:42:00 UTC

Permalink

Browser widget usage examples:
http://forums.livecode.com/viewtopic.php?f=93&t=29018

Keith Clarke via use-livecode

2018-11-06 18:24:00 UTC

Permalink

Thanks for the link, Herman - some interesting use cases there …once I’ve got the connectivity in place. :-)
Best,
Keith

Post by hh via use-livecode
http://forums.livecode.com/viewtopic.php?f=93&t=29018
_______________________________________________
use-livecode mailing list
http://lists.runrev.com/mailman/listinfo/use-livecode

hh via use-livecode

2018-11-06 19:49:59 UTC

Permalink

Most examples of that link assume that you have control of the pages.
And most use the js of the browser widget as "helper" only, the widget doesn't display
anything (is hidden).
Now you wrote that you don't have control.

So your "first experiments" method is one way to go, then you have full control.

My experiences are that there are no general rules how to do that. The best method
depends on the current content with all its variabilities. Andre gave some appropriate
and useful options.
You can also remove all css and js and set the htmltext of the widget to a string
with your own (inline) css and/or (inline) js, with or without any "do in widget".
** Merge() is the tool to use your templates. **

Post by Keith Clarke via use-livecode
Thanks for the link, Herman - some interesting use cases there …once I’ve got the
connectivity in place. :-)
--
Thanks Andre for the detailed response and HTTPD library steer - that’s new to me so
I shall review with interest. :-)
I’m not in control of the pages, so that may be more useful than my first experiments
- which were to download the page content into LC, add some markup and load the HTML
text into the browser widget as a local ‘offline’ page.

Post by hh via use-livecode
http://forums.livecode.com/viewtopic.php?f=93&t=29018
do "paintItRed()" in widget "Browser"
Which is more readable. Also, the body of the function inside the HTML
can be as complex as you want. Now, if you're not in control of the
HTML, I'd opt for some out-of-the-box strategy where you have the LC
HTTPD library serving the JS content and then use the LC "do .. in
widget" form to add a new <script> tag with the "src" attribute pointing
to the HTTPD library server, the script would load and execute in the
context of the loaded page. This should only be done after the page is
loaded though or your script risks executing before the HTML is complete.
Be aware that you can use the "do in widget" form with complex scripts,
but I'd rather use the form above which keeps the JS and LC separate
which is more of a personal preference than a technical reason to be honest.

... Is it possible to inject a multi-line javascript function - with variables
definition, loops, etc - in this fashion or would the function need to be injected
into the page within the browser as markup and then called from a one-line script
from LiveCode?