I'm using the following code inside HTML embedded component to display the following URL
"https://datastudio.google.com/embed/reporting/fkfkfkfkfffkkf/page/gurVC"
I received this URL from the following function (inside the code)
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
//...
</script>
That means receivedData ="https://datastudio.google.com/embed/reporting/fkfkfkfkfffkkf/page/gurVC"
But now how can I put this variable into the iframe source?
I tried to do it like this src=receivedData but it doesn't work.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<style>
body { background: #232323; width: 95%; margin: 0 auto; }
/* Responsive Container for iFrame */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<title>Tech Ops PH | your < IT / design < partner </title>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
let receivedData = event.data;
}
};
//...
</script>
</head>
<body>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe width="600" height="9000" src=receivedData frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
You could fill the iframe src property with javascript. Get the iframe by ID and fill the src property with your data.
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data == true && event.data != "") {
document.getElementById("myIframe").src = event.data;
}
};
</script>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe id="myIframe" width="600" height="9000" src=receivedData frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
This should fill the src property on the iframe as soon as you receive data.
For a reference check this out w3schools iframe src property