I'm using this code to change dynamically the iframe URL and it works well when I'm using "https://www.icqmail.com/" URL but when I using this URL "https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" data studio embedded I got 404.
When I changed the iframe src to be equal to URL like this src="https://www.icqmail.com/" both sites are working well.
<!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) {
document.getElementById("myIframe").src=decodeURI(event.data)
console.log(decodeURI(event.data));
}
}
</script>
</head>
<body>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe id="myIframe" width="600" height="9000" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
Why the document.getElementById("myIframe").src code doesn't work well with "https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" and work well with "https://www.icqmail.com/" how to fix it?
Via response headers web pages can tell the browser what other pages are allowed to iframe them.
Eg. datastudio.google.com sends the header:
x-frame-options: SAMEORIGIN
Meaning "The page can only be displayed in a frame on the same origin as the page itself."
Docs
But your other page does not so it can be embedded.