Livecode Demo of two way javascript communication?

[Andreas Bergendal]

I’ve added a source code download link at the bottom of the page:
https://wheninspace.com/WebpageInteractionStack/

The steps are rather simple:
- Open the stack with LC10 and run the standalone builder with "Build for web" checked.
- Replace the html file in the deployment folder (in this case ”WebpageInteractionStack.html”) with the index.html file included in the source code download.
- Upload everything in the deployment folder (should be 7 files) to whatever server you use, and then go to that location with your web browser to launch the index.html file.

The html file can of course be named whatever you like, but then you must include it in the url when accessing the site. By calling it index.html it suffices to include the parent level in the url (like I do above). But I guess y’all know this, I believe it's worked like that since the dawn of the internet… :)


> 5 feb. 2024 kl. 20:40 skrev David Bovill via use-livecode <use-livecode at lists.runrev.com>:
> 
> Perfect - just what I was looking for. Can you share the stack, and the
> steps to saving / exporting the standalone?
> 
> On Sat, 27 Jan 2024 at 17:50, Andreas Bergendal via use-livecode <
> use-livecode at lists.runrev.com> wrote:
> 
>> OK, so here’s a quick proof of concept, with functions triggered from page
>> to stack and from stack to page.
>> It is not using postMessage, only 'standard’ javascript listeners. Works
>> well on mobile too (at least iPhone).
>> 
>> https://wheninspace.com/WebpageInteractionStack/
>> 
>> If I find the time, it would be very interesting to try deploying two
>> different stacks on the same page (is that even possible?), and then have
>> them communicate with each other. Or have two stacks in two different
>> pages, and have them communicate via postMessage calls…
>> 
>> 
>>> 26 jan. 2024 kl. 17:15 skrev David Bovill via use-livecode <
>> use-livecode at lists.runrev.com>:
>>> 
>>> The scenario would be events like resize, or a button click in the html
>>> page triggering a handler in the Livecode wasm export. The other way
>> round
>>> would ve a Livecode handler in the exported wasm widget calling a
>>> javascriot function in the surrounding Web page.
>>> 
>>> My understanding in other contexts is that you use the postMessage Web
>> api
>>> for this type of thing -
>>> 
>> https://www.google.com/url?q=https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage&sa=U&ved=2ahUKEwiE5eCSufuDAxX7UkEAHbtmBvIQFnoECAoQAg&usg=AOvVaw09QGMScP0-9YwJuHAC-sIE
>>> 
>>> Apart from triggering handlers in both directions passing (json) data in
>>> both directions is needed.
>>> 
>>> On Thu, 25 Jan 2024, 20:35 Andreas Bergendal via use-livecode, <
>>> use-livecode at lists.runrev.com> wrote:
>>> 
>>>> I’ve created some web deployments where the web page interacts with the
>>>> stack e.g. in the sense that a change of the browser window rect
>> triggers a
>>>> resizeStack message in the stack.
>>>> 
>>>> But I’m not sure if by bidirectional you mean that actions in the stack
>>>> should also affect the web page in some way? Could you give an example
>> of
>>>> what you have in mind?
>>>> 
>>>> 
>>>>> 24 jan. 2024 kl. 12:47 skrev David Bovill via use-livecode <
>>>> use-livecode at lists.runrev.com>:
>>>>> 
>>>>> Is there a demo out there for simple bidirectional interaction between
>> a
>>>>> web page and a recent stack exported as wasm? Anyone experimenting with
>>>>> this?