Javascript in HTML Widgets not executing on iOS and Android?

(Teo) #1


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 ?



Here is the Hype document: (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 (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. (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];

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:

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