I am using the html-component on a dynamic page to load item-specific html, in this case a code snippet from Tripadvisor.
When I put the following code into the HTML-source, all goes well:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init () {
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
document.getElementById('framesource').innerHTML = event.data;
}
}
}
</script>
</head>
<body onload="init();" style="background-color:lightgray;">
<p id="framesource"><div id="TA_selfserveprop929" class="TA_selfserveprop"> <ul id="mTk1DW" class="TA_links 65tgccXQfOZR"> <li id="LkfoIdodj" class="kAZapVShl"> <a target="_blank" href="https://www.tripadvisor.com.ar/"><img src="https://www.tripadvisor.com.ar/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=929&locationId=3376312&lang=es_AR&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script></p>
</body>
</html>
but, if I read everything after <p id="framesource">from the dataset (and is is coming in perfectly), like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init () {
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
console.log("data=" + event.data);
document.getElementById('framesource').innerHTML = event.data;
}
}
}
</script>
</head>
<body onload="init();" style="background-color:lightgray;">
<p id="framesource">Espere</p>
</body>
</html>
then only the Tripadvisor logo part is displayed, the script is not executed. And the console.log shows the snippet coming in beautifully, just before the InnerHtml.
Is there anyone who can tell me what I am doing wrong?
OK, since Sam published the two new articles on the HTML-component, I made a new page and tried the example code from https://support.wix.com/en/article/working-with-the-html-component-in-developer-tools
Result: same problem as above. What I did was this:
1) took the example code (played around with changing span to P or div) and threw the Tripadvisor code snippet at it. Result exactly the same as above mentioned: the first part (holding the Tripadvisor logo is executed, the rest not (just a black dot)
2) took exactly the same code, threw the buttons on the html-form out and hard copied the Tripadvisor code snippet where it should appear. ANd voila, it worked. Below html:
ad 1) html from example code (working fine with messaging, but no scripting)
<html>
<head>
<style>
.button {
background-color: #155DE9;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
font-family: 'Arial';
}
.label {
font-family: 'Arial';
}
.input {
font-size: 14px;
}
</style>
<script type="text/javascript">
// when a message is received from the page code
console.log("Before onmessage");
window.onmessage = (event) => {
console.log("have event");
if (event.data) {
console.log("message received");
document.getElementById("theLabel").innerHTML = event.data;
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
}
</script>
</head>
<body>
<div id="theLabel" class="label">HTML Label</div>
<br/><br/>
<button class="button" onclick="button_click()">< Send Message</button>
<br/><br/>
<input type="text" class="input" id="theMessage">
</body>
</html>
If I throw the below snippet at it, it displays just the logo and a black dot below, that´s it:
<div id="TA_selfserveprop929" class="TA_selfserveprop"> <ul id="mTk1DW" class="TA_links 65tgccXQfOZR"> <li id="LkfoIdodj" class="kAZapVShl"> <a target="_blank" href="https://www.tripadvisor.com.ar/"><img src="https://www.tripadvisor.com.ar/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=929&locationId=3376312&lang=es_AR&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script>
ad 2) if I take the same html, throw the buttons/etc out and put the same code snippet where it belongs, it DOES work:
<html>
<head>
<script type="text/javascript">
// when a message is received from the page code
console.log("Before onmessage");
window.onmessage = (event) => {
console.log("have event");
if (event.data) {
console.log("message received");
document.getElementById("theLabel").innerHTML = event.data;
}
};
// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById("theMessage").value, "*");
}
</script>
</head>
<body>
<div id="theLabel" class="label"><div id="TA_selfserveprop929" class="TA_selfserveprop"> <ul id="mTk1DW" class="TA_links 65tgccXQfOZR"> <li id="LkfoIdodj" class="kAZapVShl"> <a target="_blank" href="https://www.tripadvisor.com.ar/"><img src="https://www.tripadvisor.com.ar/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a> </li> </ul> </div> <script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=929&locationId=3376312&lang=es_AR&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=true&display_version=2"></script></div>
<br/><br/>
<br/><br/>
<input type="text" class="input" id="theMessage">
</body>
</html>
I am sweating on this for two weeks now and whatever I do, the result stays the same: hard coded works, posting the snippet in a message doesn´t.
Is there anyone with a suggestion?
I believe the body onload is not executed. Try put that somewhere else in code.