Add element outside of an iframe - iframe

Question

I have 2 vue projects. In one I am creating a simple component:
<template>
<button #click="importIframe">Click me</button>
</template>
<script>
export default {
name: 'App',
methods: {
importIframe() {
console.log(parent.document)
},
}
</script>
In the other project of vue, import with an iframe the project 01 with a script:
<script src="http://localhost:8081/myiframe.js"></script>
Project 01 is running in localhost:8081 and 02 in 8080. I have a my iframe script which is the one that creates the iframe and imports it into the body.
This is myiframe.js script:
ready(function () {
initIframe()
})
/**
* Auto execute javascript function
* #param callbackFunction
*/
function ready(callbackFunction) {
if (document.readyState != 'loading') callbackFunction()
else document.addEventListener('DOMContentLoaded', callbackFunction)
}
/**
* Initialize iframe
* #return {Promise<void>}
*/
function initIframe() {
// Set url
const baseUrl = 'http://localhost:8081'
// Create div tag
const divContainer = document.createElement('div')
divContainer.setAttribute('id', 'container-iframe')
// Create iframe tag
const iframe = document.createElement('iframe')
iframe.setAttribute('src', baseUrl)
divContainer.appendChild(iframe)
document.body.appendChild(divContainer)
}
What I want to achieve is that by clicking on the button. I should create a new div inside # container-iframe. If I select the iframe container it returns null. And if I select the parent of the iframe with parent.document. It gives me a security error, how can I add an element to the parent of the iframe?

Answer 1

This is a very common issue when you work with cross-domains.
Good news is that we have postMessage to send events between the iframe and the parent.
In the child (iframe button):
<script>
export default {
name: 'App',
methods: {
importIframe() {
parent.postMessage("clicked", "*");
},
}
</script>
Then listen in paranet:
function listenToChild() {
var eventMethod = window.addEventListener
? "addEventListener"
: "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent"
? "onmessage"
: "message";
eventer(messageEvent, function (e) {
// if (e.origin !== 'http://the-trusted-iframe-origin.com') return;
if (e.data === "clicked" || e.message === "clicked")
alert('Message from iframe just came!');
// create a new div inside # container-iframe.
console.log(e);
});
}
Then add it to page load (ready function in your case)
More about the postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
https://gist.github.com/cirocosta/9f730967347faf9efb0b