Javascript in HTML Widgets not executing on iOS and Android?


(Teo) #1

Hi,

I just noticed that javascript code in HTML Widget is not executed on iOS.

In the attached example, clicking on the ‘Change content’ button calls a function within the HTML Widget that makes it change its content.

Hype caller function :

HTML Widget content:

It works on a desktop browser, but not on iPad (neither Safari nor Chrome) - am I doing something wrong ?

Is the same behaviour to be expected from Android browsers ?

Cheers,

Teo

Here is the Hype document:
iPadWidget.hype.zip (15.8 KB)


(Hans-Gerd Claßen) #2

this’ll be a security issue … cross origin request …

from safari:

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

from chrome:
Error in myTestFunction: SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame.

do you really need a iFrame-construct¿

if so, you may be better off with a postMessage-approach : iPadWidget.hype 2.zip (13.3 KB)


How do I control (play and pause) on a time line that is inside the HTML Widget?
(Teo) #3

Thank you for the quick reply.

Unfortunately I need an iFrame because:

  • it has to be offscreen or invisible (opacity 0)
  • its content has to be printed as A4 pages (see project attached).

Unless there is another way to print it, I’m stuck with this method.

iPadPrintWidget.hype.zip (18.6 KB)


(Hans-Gerd Claßen) #4

i posted a possible solution in my previous post … you can use postMessage which can send a message whith arguments. the target needs an eventListener ‘message’


(Teo) #5

Oops, sorry - from my abyss of despair, I didn’t notice your attachment. :slight_smile:

Unfortunately, it does not seem to work either on an iPad…


(Hans-Gerd Claßen) #6

change this line

myObject = hypeDocument.getElementById('myWidget').getElementsByTagName("IFRAME")[0];

https://amabend.com/mp3/iPadWidget/


Hype button drives javascript which sets HTML Widget - not working on iPad
(Teo) #7

Brilliant! This works perfectly.

Many thanks for your great help!


(Hans-Gerd Claßen) #8

not that for :wink:

tipp:
if you connect your appledevice with your mac (cable) you can use desktop-safaris devtools to examine the devices safariwindow.

in this case it showed that hype displays another hierarchy on mobile safari while wrapping the iFrame with a div appending overflow-touch … -> nice to know :slight_smile:

sunny day