I have an iframe that shows once a search is done and displays results using data from backend. On mobile the results dont show but on desktop it works perfectly. After looking at code of live site the div inside the iframe that get the data in empty.
Page code:
import {getLocation} from 'backend/locate';
import {getBrands} from 'backend/brands';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
export function button1_click(event, $w) {
$w("#html2").show();
$w("#box2").hide();
$w("#html3").show();
$w("#button10").show();
$w('#preloader').show();
var zip = $w("#zipInput").value;
var mile = $w("#mileInput").value;
var brand = $w("#dropdown1").value;
$w("#html2").postMessage("<br><br><br>Search has returned no Results<br>No worries, shop our online store:<br><br>" + "<a class='button' href='https://www.mysite.com/store'>SHOP</a>");
getLocation(zip,mile,brand)
.then(data=> {
var i = 0;
var dba = data.result.locations.location
var markers = []
var dat = "";
for (;dba[i];) {
dat += "<div class='row row-no-container' style='background-color:ffffff;padding: 10px 10px;margin: 0 10px;color: #512d6d;line-height: 1.2em;'><div class='col-xs-7'>" + "<h4>" + data.result.locations.location[i].dba + "</h4>" + "<a target='_blank' href='//maps.google.com/?q=" + data.result.locations.location[i].street + ", " + data.result.locations.location[i].city + ", " + data.result.locations.location[i].state + " " + data.result.locations.location[i].zip + "'>" + data.result.locations.location[i].street + "<br>" + data.result.locations.location[i].city + ", " + data.result.locations.location[i].state + " " + data.result.locations.location[i].zip + "</a><br>"
+ "<a class='hidden-xs' href='tel:" + data.result.locations.location[i].phone + "'>" + data.result.locations.location[i].phoneFormatted + "</a>" + "<span class='visible-xs'>" + data.result.locations.location[i].phoneFormatted + "</span></div>"
+ "<div class='col-xs-5 text-right'>" + "<strong>" + data.result.locations.location[i].distance + " miles</strong><br>" + "<a class='has-tooltip' data-toggle='tooltip' data-placement='left' data-container='.listings-list ul' title='' data-original-title='" + data.result.locations.location[i].otherBrands.otherBrand + "'>3 Brews</a>"
+ "<br class='hidden-xs'><br><a target='_blank' href='//maps.google.com/?q=" + data.result.locations.location[i].street + ", " + data.result.locations.location[i].city + ", " + data.result.locations.location[i].state + " " + data.result.locations.location[i].zip + "' class='btn btn-xs btn-default hidden-xs'><i class='fa fa-map-marker'></i> Map</a>"
+ "<a href='tel:" + data.result.locations.location[i].phone + "' class='btn btn-xs btn-default hidden-xs'><i class='fa fa-phone'></i> Call</a>" + "</div></div>" + "<br><br>"
let loc = data.result.locations.location[i];
markers.push({title: loc.dba, position: {lat: loc.lat, lng: loc.long}});
i++;
}
$w('#html2').postMessage(dat);
$w('#html3').postMessage({markers});
console.log({markers})
});
$w('#preloader').show();
waitForLoading();
}
export function button10_click(event, $w) {
$w("#html2").hide();
$w("#box2").show();
$w("#button10").hide();
$w("#html3").hide();
$w('#preloader').show();
$w("#zipInput").value = "Zip Code";
$w("#mileInput").value = 25;
$w("#dropdown1").value = "Brands";
waitForLoading();
}
$w.onReady(() => {
$w("#html2").hide();
$w("#html3").hide();
$w("#button10").hide();
$w('#preloader').show();
waitForLoading();
});
function waitForLoading() {
setTimeout(() => {
$w('#preloader').hide('FadeOut');
}, 1500);
}
Iframe (embed):
<html>
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<link href="/css/bootstrap-fifths.css" rel="stylesheet">
<link href="/css/sweetalert.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
overflow-x: hidden;
height: 100%;
width: 100%;
}
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 0px solid #0b509e;
border-radius: 0px;
background: #0d5eba;
background: -webkit-gradient(linear, left top, left bottom, from(#0d5eba), to(#0d5eba));
background: -moz-linear-gradient(top, #0d5eba, #0d5eba);
background: linear-gradient(to bottom, #0d5eba, #0d5eba);
font: normal normal bold 20px arial;
color: #ffffff;
text-decoration: none;
}
.button:hover,
.button:focus {
border: 0px solid #0d5eba;
background: #1071df;
background: -webkit-gradient(linear, left top, left bottom, from(#1071df), to(#1071df));
background: -moz-linear-gradient(top, #1071df, #1071df);
background: linear-gradient(to bottom, #1071df, #1071df);
color: #ffffff;
text-decoration: none;
}
.button:active {
background: #083870;
background: -webkit-gradient(linear, left top, left bottom, from(#083870), to(#0d5eba));
background: -moz-linear-gradient(top, #083870, #0d5eba);
background: linear-gradient(to bottom, #083870, #0d5eba);
}
h4 {
font-size: 15px;
}
.input {
font-size: 14px;
}
</style>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("theLabel").innerHTML = event.data;
}
};
</script>
</head>
<body style="background-color:transparent;">
<div id="theLabel" class="label" style="display: block;"></div>
<br><br>
</body>
<footer>
<script src="/assets/js/sweetalert.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
</footer>
</html>