Estoy usando este código para cambiar dinámicamente la URL del iframe y funciona bien cuando uso la URL "https://www.icqmail.com/" pero cuando uso esta URL "https://datastudio.google.com /embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" estudio de datos incrustado Obtuve 404.
Cuando cambié el iframe src para que sea igual a una URL como esta src="https://www.icqmail.com/" , ambos sitios funcionan bien.
<!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> Por qué el código document.getElementById("myIframe").src no funciona bien con "https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" y funciona bien con "https:/ /www.icqmail.com/" ¿cómo solucionarlo?
A través de los encabezados de respuesta, las páginas web pueden decirle al navegador qué otras páginas pueden incluir en un marco flotante.
P.ej. datastudio.google.com envía el encabezado: x-frame-options: SAMEORIGIN Significa "La página solo se puede mostrar en un marco en el mismo origen que la página misma". Documentos
Pero su otra página no lo hace, por lo que se puede incrustar.