Html string not working in html iframe

Hello communitiy!
I am trying to create a website that contains drag & drop functionality. I try to do this by sending a string that contains HTML code to a HTML iFrame. I have sent HTML code successfully with other different (long and dynamically prepared) HTML strings many times before, and it worked.

At a later stage I will have to update the code using my database, corvid code, etc. to make it dynamic.
But first I am trying to get the drag&drop functionality to work.

The HTML code works fine in following cases:
1: As a standalone HTML file,
2: When copying the code fully into the HTML iFrame.

But I can not achieve the drag & drop functionality to work when the code is sent as a string to the iFrame via .postMessage

Here is the code from the corvid editor:


import wixData from ‘wix-data’ ;
import wixUsers from ‘wix-users’ ;

//\
$w.onReady( function () {
let myStyle = ’ \

\ #container { \ width: 100%; \ height: 400px; \ background-color: #ffffff; \ display: flex; \ align-items: center; \ justify-content: center; \ overflow: hidden; \ border-radius: 7px; \ touch-action: none; \ } \ .item { \ border-radius: 50%; \ touch-action: none; \ user-select: none; \ position: relative; \ } \ .one { \ width: 100px; \ height: 100px; \ background-color: rgb(245, 230, 99); \ border: 10px solid rgba(136, 136, 136, .5); \ top: 0px; \ left: 0px; \ } \ .two { \ width: 60px; \ height: 60px; \ background-color: rgba(196, 241, 190, 1); \ border: 10px solid rgba(136, 136, 136, .5); \ top: 30%; \ left: 10%; \ } \ .three { \ width: 40px; \ height: 40px; \ background-color: rgb(0, 255, 231); \ border: 10px solid rgba(136, 136, 136, .5); \ top: -40%; \ left: -10%; \ } \ .four { \ width: 80px; \ height: 80px; \ background-color: rgb(233, 210, 244); \ border: 10px solid rgba(136, 136, 136, .5); \ top: -10%; \ left: 5%; \ } \ .item:active { \ opacity: .75; \ } \ .item:hover { \ cursor: pointer; \ } \ ' ;

let myBody = ’ \

\
\
\
\
\
\
\
\
\ ' ;

let myScript = ’ \

' ;

let myHtml = myStyle+myBody+myScript;

console.log(myHtml);
$w( “#htmlStPln” ).postMessage(myHtml);
} );
});


The HTML iframe contains the following code:


window.onmessage = (event) => { if (event.data) { document.getElementById("myTab").innerHTML = event.data; } }; *********************** Why is the HTML code working when run completely within the HTML iframe - and not when sent as a string? Any help is appreciated! Thanks Stefan

I don’t think you can use document.getElementById(“myTab”).innerHTML in such an iframe as it’s sandboxed . But maybe I’m wrong.

Hey J.D. Thanks for your reply! I did it many times before. It usually works, but the draggability unfortunately not.

OK. So it’s not related to Corvid. Try to put it directly in the iframe and check if it works. If not, debug your code.

The HTML code works fine in following cases:
1: As a standalone HTML file,
2: When copying the code fully into the HTML iFrame.

  • from some reason you put the outside the . try to it inside.

No success…

Yes, you can’t just inject script to innerHTML. search google and find some solutions,

Oh, Thanks J.D.! It never occurred to me that this could be a problem. Makes total sense.
I googled a lot - but before one googles you need to know the issue! I’ll find something, thanks for your time and effort. I might post a solution when I found one.

Here is the solution:
DONT write the script as a string into the .innerHtml!

The script works, when you write it into the script tag in the HTML Edit Code Box of the HTML container.4
Unfortunately like this your script can not be altered by data objects or any wix code.

Example in the HTML Edit Code Box: