How to Avoid Cross Origin in Public Site to WordPress Communication

Use Case:

We have a website built with WordPress and hosted on the domain www.xyzdomain.com, and our business data to the public resides in Salesforce. So the business decides to display the data to the public via the company website. So we built a few VF pages and enabled them to the public via sites from Salesforce. We integrated the sites VF pages into the websites.

What is the Problem?

1. The SF data on the VF page is so dynamic and our VF page is more responsive to populate the number of data into UI, so the page height always varies based on the number of records. If the VF page records count increased, then there is a second scroll bar for the Iframe content(VF page) on the website page. This is not such a good UI or responsive to customers.
2. Navigations from one page to another page on the website based on the actions performed inside the VF page is not possible.

The summary of the problem is, communication from child iframe content(VF page) to the parent window(Website page) was challenging since both the pages are generated from different domains.

If we try to communicate, then we will face the same-origin policy error.

You can't access an iframe with different origin using JavaScript. For the same-origin policy browsers block scripts trying to access a frame with a different origin.

Origin is considered different if at least one of the following parts of the address isn't maintained:
protocol://hostname:port/path/to/page.html
If you want to access a frame, Protocol, hostname and port must be the same as your domain.

Solution:

Enabling a trusted communication between parent window and child window.

Technically, post a message from child window to parent window by adding the Domain name where we should be able to receive the message.

Example:
Parent window: https://xyzdomain.com
Child window: https://.xyzdomain.force.com/apex/abc.vfp

Communicate from child window to parent via Javascript by posting a message with the height of the VF page content & number of records.

Post Message From Site.com:
//----post a message from child VF page if any action performed via JS.
parent.postMessage(
{
pageHeight: pageBodyHeight,
numberofRecords: numberofRecordsDisplying
},
"https://xyzdomain.com/");

Listener to Site.com:
Adding a listener in parent to listen to this message and perform necessary action in the parent.

if (window.addEventListener) {
window.addEventListener("message", handleMessage);
} else {
window.attachEvent("onmessage", handleMessage);
}
function handleMessage()
{
var messageFromSender = event.data;
var pageHeight = messageFromSender.pageHeight;
var numberofRecords = messageFromSender.numberofRecords;

//----performa the necessary actions in here----//
}

The above will not throw the Cross-origin frame error.