Coding inside iframe

Ask the community
,
1

Can anyone help me with this code:

HTML Component Test

Message will go here

I know the message from page is received (a can see “demo”
variable wich is simple text passed ,by a click on a image, with address url of a pdf file)
If I put adobe api code inside “} look” nothing happen
My goal is to pass variable “demo” to content:{location: {url:
to see the right pdf passed as simply string from the page code.

Best regards,

2

window.parent.postMessage(msg, “http://mysite.com”);:wink:

First, above all else, change the URL to your own site, which must be https.

3

How this may affect the message received from the page code ?
Anyway I have tried without result.

4

According to the HTMLcomponent API, pdfs will not work unless you have the premium version. The free version of WIX, does not support pdfs. Don’t know if that is causing you grief.

5

I have WIX premium version …

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>
7

Just a followup. I just tried the same example running it in preview mode within the editor and then running it from the website directly after publishing it. I got 2 different domains that were sent to Adobe.

Evidently when the HTMLcomponent runs within the Wix editor and then using preview to test it, Adobe detected the embedded code was coming from domain htmlcomponentservice.com

When running the same HTMLcomponent from the website directly after publishing it, Adobe detected a different domain. It was filesusr.com. So I guess when you are finished testing in your editor, you will have to change the api key to match the .filesusr.com domain.

This suggest you may need 2 projects defined within Adobe, one for testing within the editor and another for your published website. This means you will get 2 API keys, and you’ll need to set up the code within the HTMLcomponent appropriately.

8

Or you could make a test page only visible by you instead of using Preview to test

9

@devadrianhankin Absolutely, just hide the page from the menu (under settings). This allows you to run it if you know the url link, but it doesn’t show up in any menu.

10

My problem is a bit different. I need to change “content :{ location :{ url : “https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf” }},”"
with the simply string url “demo” received (in the iframe) from the page code by $ w ( “#html1” ). postMessage.
“Demo” variable contain the url of the right pdf file I need to view.

11

I have found how send variable to adobeDCView . previewFile:
<!doctype html>

HTML Component Test

Message will go here

But I cannot assign to variable Docname the correct content of Id ‘demo’ (passed by a click on an image) e display correctly in the paragraph.
Can anyone hlep me ?