window.parent.postMessage(message, targetOrigin);

// 例
window.parent.postMessage("sample.jpでしか受信出来ないメッセージです", "https://sample.jp");

window.parent.postMessage({
    type: "sample",
    data: {
        message: "誰でも受信できるメッセージです",
    },
}, "*");

const example = {
    type: "example",
    data: {
        message: "JSONで渡すメッセージです",
    }
}

window.parent.postMessage(JSON.stringfy(example), "*");

window.addEventListener("message", (response) => {
    // 取得した内容を利用した処理
}) 

const iframeElement = document.querySelector("iframe");
iframeElement.contentWindow.postMessage(message, targetOrigin);

window.addEventListener("message", (response) => {
    // 取得した内容を利用した処理
}) 

let leftCount = 0;
const leftClick = () => {
    const message = {
        type: "click",
        data: {
            name: "left",
            count: leftCount,
        }
    }
    window.parent.postMessage(message, "*");
    leftCount++;
}

let rightCount = 0;
const rightClick = () => {
    const message = {
        type: "click",
        data: {
            name: "right",
            count: rightCount,
        }
    }
    window.parent.postMessage(message, "*");
    rightCount++;
}

// オリジンが異なるので親ページでは受信出来ない
const originRestricted = () => {
    const message = {
        type: "click",
        data: {
            name: "restricted",
        }
    }
    window.parent.postMessage(message, "https://sample.jp");
}

window.addEventListener("message", (response) => {
    if (response.data.type === "click") {
        const data = response.data.data;
        if (data.name === "left") {
            const leftNumberElement = document.querySelector("#left-number");
            leftNumberElement.innerHTML = data.count;
        } else if (data.name === "right") {
            const rightNumberElement = document.querySelector("#right-number");
            rightNumberElement.innerHTML = data.count;
        }
    }
})

const postColor = (color) => {
    const iframeElement = document.querySelector("iframe");
    const message = {
        type: "color",
        data: {
            color: color,
        }
    }
    iframeElement.contentWindow.postMessage(message, "*");
}

window.addEventListener("message", (response) => {
    if (response.data.type === "color") {
        const messageAreaElement = document.querySelector(".message-area");
        const createDivElement = document.createElement("div");
        const color = response.data.data.color;
        if (color === "red") {
            createDivElement.className = "red";
        } else if (color === "blue") {
            createDivElement.className = "blue";
        } else if (color === "yellow") {
            createDivElement.className = "yellow";
        }
        messageAreaElement.appendChild(createDivElement);
    }
})