Coding inside iframe

Ask the community
,
6

I had to create an adobe project first on the adobe site, then got the API key which you need to insert in the ‘clientid:’. The other issue I ran into was that when entering the allowed domain into the adobe project. You can’t put in Wix.com or your website domain. I constantly got an error saying that “htmlcomponentservice.com” was not an allowed domain. I created the project at adobe with the allowed domain being “htmlcomponentservice.com” and then it worked. It seems that Wix uses htmlcomponentservice.com when embedding HTML.

Here is my page code:

$w.onReady(function () {
});


export function html1_message(event) {
    if (event.data) {
        console.log(`Message received by page code: ${event.data}`);
    }
}


export function buttonHTML_click(event) {
    $w("#html1").postMessage("Message from page code");
}

Here is the code I put into the HTMLComponent.

<!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("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "https://www.mywebsitename.com/");
}
</script>
</head>

	<body onload="init();" >
		<h1>HTML Component Test</h1>
		<p id="demo">Message will go here</p>
       <!-- <div id="adobe-dc-view" style="height: 360px; width: 500px;"> -->
          <div id="adobe-dc-view"></div>
          <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "------------------------b5beac08", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "SIZED_CONTAINER"});
	});
</script>      
  </body>
</html>