I’ve managed to build a banner for DoubleClick using Hype. When previewing locally, everything is tracking as expected in the console window.
The runtime JS file for Hype is local and not externally hosted and I’m using the Hype API to communicate with different scenes and symbols in my document (which works as expected locally).
However, when I upload to the Studio I receive this error in the console window and the Ad fails to play.
“Uncaught DOMException: Blocked a frame with origin “https://s0.2mdn.net” from accessing a cross-origin frame.”
When clicking on the error, it takes me to this bit of code in my Javascript file:
Yeah sorry, I should have been a little more clear. The project I am working on is date sensitive so I’m swapping the elements in Hype externally (using the API) in addition to swapping videos (which are outside of the Hype composition).
Basically, to make sure the banner is QA approved I often keep the video and controls separate as it provides more control between browsers etc. Another reason, is that I have a hand-coded spritesheet animation so need to go to a new scene once the spritesheet has finished.
I looked in to PostMessage yesterday but I need a domain to communicate with so unsure of how to implement it to an ad server.
for example a message like: window.parent.postMessage(['indentifier', 'value'],*)
should work.
then you’ll need a listener at the postMessage-target to execute some stuff
window.addEventListener(‘message’, function(e) {
var identifier = e.data[0];
if(identifier == ‘xxx’){
var data = e.data[1];
//do something
}
}, false);
Hi again, I’m kind of getting somewhere but am really confused on where this stuff should go. Does the
window.parent.postMessage(['ready', 'data'], '*')
go in my Hype document (i.e. a function on scene load)? Depending on where I put the listener I’m noticing some alerts so I guess the message is sending but I’m still receiving the same errors and elements from the Hype document are still unrecognized.
window.addEventListener('message', function(e) {
var identifier = e.data[0];
if (identifier == 'ready'){
var data = e.data[1];
//alert(e);
}
}, false);
This is the error I am now receiving:
Uncaught DOMException: Failed to read the ‘contentDocument’ property from ‘HTMLIFrameElement’: Blocked a frame with origin
Yeah sure, here is a simple version of my setup. I’ve commented as much as I can.
So essentially, there is a hand-coded spritesheet animation that calls a function to tell Hype to continue a timeline once it’s finished. Then there is a function that swaps symbols based on the date. All of this works fine locally.
The error in DoubleClick occurs when the API initialisation starts and assigns the custom vars to the Hype ID’s. Is there another way of communicating with the Hype API instead of using “window”?
Ah ok, yeah that makes complete sense now thinking about it as there was no need to post a message to anything. Good to know in case I need to use postMessage in the future though. Couldn’t figure that out. I think I read about the window.parent.myhypedocument from somewhere when I started the project.
That was doing my head in
Thanks so much for taking the time to look at the files.