Working Example
minimal title
Page Code
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//Declare message handler
$w('#html1').onMessage(processMessage);
setTimeout(() => {
sendActionToHTMLComponent('pageReady');
}, 1000);
});
function loadTextBox()
{
let text = $w('#textToCopy').value;
sendActionToHTMLComponent('load', text);
}
function sendActionToHTMLComponent (action, payload) {
let htmlMessage = {'action':action, 'payload':payload};
$w('#html1').postMessage(htmlMessage);
}
function processMessage(message) {
let data = message.data;
let action = (data.action ? data.action : 'oops');
switch (action) {
case 'copied':
setStatusMessage("Copy Complete");
break;
case 'load':
setStatusMessage("Text "+data.payload);
break;
case 'htmlComponentReady':
setStatusMessage("Copy Component Loaded and Ready");
loadTextBox();
break;
default:
setStatusMessage(action);
break;
}
}
function setStatusMessage(message) {
$w('#statusMessage').text = (message?message:'');
}
export function textToCopy_change(event) {
loadTextBox();
}
HTML Component Code
<!doctype html>
<html>
<head>
<div id='styles'>
<style>
#copyButton {
background-color: #8FB02B;
border-color: white;
border-width: 3px;
width: 140px;
height: 40px;
}
#cutPaste {
width: 340px;
height: 200px;
margin: 10px;
}
body {
background-color: #FD882B;
}
</style>
</div>
<script type="text/javascript">
// Used to catch messages posted from the Wix Page Code
window.addEventListener('message', (event) => {
if (event.data) {
processMessage(event.data);
}
});
// Tells the Page code that the HTML compomnent is ready
// May need a setTimeout delay if this loads before the page code does.
function htmlComponentReady() {
sendAction('htmlComponentReady');
}
function initialization () {
// Add code to perform initialization here
}
​ // Convenience function to send an action command to the wix page
function sendAction(action, payload) {
// Use force use of 'action'property in the wix message
sendMessageToWixPage(action, 'action', payload);
}
// Builds the message to be sent to the Wix Code page and posts it
function sendMessageToWixPage(message, type, payload) {
logStatus('sendMessageToWixPage('+message+', '+type+', '+(payload?payload:'')+')');
let key = (type ? type : 'error');
if (message) {
let theData = {};
theData[key] = message;
if (payload) {
theData.payload = payload;
}
window.parent.postMessage(theData, '*');
}
}
// The sendMessageToWixPage function sets the action property to error automatically
// if the only parameter is a message
function sendError(error) {
sendMessageToWixPage(error);
}
// Add the text from the page message to the HTML Page
function loadText (text) {
// Create a text area to populate
let selectArea = document.getElementById('cutPaste');
selectArea.value = text;
logStatus('Selected area value set to - '+selectArea.value);
return 'loaded';
}
​
// This is the function that performs the copy to the computer pasteboard
// It performs the basic area selection needed by the browser and then calls the
// document.execCommand('copy') to perform the copy
function copyText () {
// Create a text area to populate
let selectArea = document.getElementById('cutPaste');
selectArea.select();
logStatus('dataSelected');
document.execCommand('copy');
sendAction('copied');
}
// In bound message handler
function processMessage(message) {
if (message['action']) {
let action = message.action;
logStatus('processMessage('+JSON.stringify(message)+')');
switch (action) {
case 'load':
{
let textPayload = (message.payload ? message.payload : "");
logStatus('load requested');
sendAction('load', loadText(textPayload));
}
break;
case 'pageReady':
{
htmlComponentReady();
}
break;
default:
{
logStatus('No Action');
}
break;
}
}
}
</script>
</head>
<body onload="start();">
<input readonly id='cutPaste' type="text"\>
<button id='copyButton' onclick="copyText();">copy</button>
<p>COPY HTML Component Loading...</p>
<div id='theStatus'></div>
<script type="text/javascript">
function logStatus(statusInfo) {
let message = document.getElementById('theStatus').innerHTML;
document.getElementById('theStatus').innerHTML = message +'<br>' +statusInfo;
}
function start () {
if (document.readyState === "complete") {
initialization();
}
}
</script>
</body>
</html>