I will guide you through on how to communicate between WIX code and an iframe here. I started with WIX example with charts and thought that it would be cool to load in animations that works on mobile and then handle clicks inside the iframe, returning data to WIX and act on that.
In this example I will navigate to different urls when clicking the animated logos inside the iframe.
When clicking on the RUN button the animations will start inside the iframe.
In the WIX page code I have this:
import wixLocation from 'wix-location';
$w.onReady(() =>{
$w("#html1").postMessage("WAIT");
$w("#html1").onMessage((event)=>{
if(event.data.type === 'ready'){
// do nothing yet, this is where the iframe is fully loaded
}
if(event.data.type === 'click'){
// If clicked inside the html iframe execute this
console.log(event.data.value);
console.log("lets navigate to the other page now");
wixLocation.to(event.data.value);
}
});
});
As you can see in the above code I receive events from iframe in the if event.data.type is a click and I get the value of the click and just navigates to that value.
The iframe source is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.ui.js'></script>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
html {
background: #fff;
}
body {
font-size: 1.5em;
color: #222;
background: #fff;
height: .25rem;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 0%;
}
.wrap {
max-width: 100%;
min-width: 61.25rem;
margin: 2rem auto 0;
opacity: 0;
}
</style>
</head>
<body onload="ready()">
<div class="wrap">
<img width="10%" src="http://www.adweek.com/wp-content/uploads/sites/2/2015/01/google-logo.png" alt="" onClick="handleClick('http://google.se')"/>
<img width="10%" src="https://blog.addthiscdn.com/wp-content/uploads/2015/11/wix-icon1.png" alt="" onClick="handleClick('http://wix.com')"/>
</div>
<script>
var $body = $('body');
var loading = [
{ elements: $body, properties: { height: '100%' }, options: {
complete: function () {
$('.wrap').velocity( 'transition.slideUpIn' );
$('img').velocity( 'transition.flipYIn' );
$('html').css({ background: '#fff' });
$(".wrap").velocity({
scale: 2,
translateX: 250
}, 2000);
}
}
}
];
window.onmessage = function(event){
if (event.data) {
if (event.data == "WAIT") {
console.log("WAIT");
}
else if (event.data == "GO") {
console.log("lets animate");
$.Velocity.RunSequence(loading);
}
}
else {
console.log("HTML Code Element received a generic message:");
console.log(event.data);
}
};
function handleClick(navigateTo){
window.parent.postMessage({
"type":"click",
"label":"button",
"value":navigateTo
} , "*");
}
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
</body>
</html>
Happy coding!