document.getElementById 无法与 Google 数据工作室嵌入一起使用答案

【问题标题】：document.getElementById not working with Google data studio embededdocument.getElementById 无法与 Google 数据工作室嵌入一起使用
【发布时间】：2021-11-30 12:37:39
【问题描述】：

我正在使用此代码动态更改 iframe URL，当我使用“https://www.icqmail.com/”URL 时它运行良好，但当我使用此 URL “https://datastudio. google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR" 数据工作室嵌入我得到 404。

当我将 iframe src 更改为等于这样的 URL src="https://www.icqmail.com/" 时，两个站点都运行良好。

<!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 &lt; IT / design &lt; 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>

为什么document.getElementById("myIframe").src 代码不能很好地与“https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR”和“https://www.icqmail”一起工作.com/”如何解决？

【问题讨论】：

标签： javascript html iframe embed google-data-studio

【解决方案1】：

通过响应标头，网页可以告诉浏览器允许哪些其他页面对其进行 iframe。

例如。 datastudio.google.com 发送标头： x-frame-options: SAMEORIGIN 意思是“页面只能显示在与页面本身同源的框架中。” Docs

但您的其他页面没有，因此可以嵌入。

【讨论】：

那么我可以做些什么来使用我这边的数据工作室 URL？
如果不修改它，您将无法在任何主流浏览器的 iframe 中加载 google 站点。这是一项安全功能，而不是缺陷。如果你告诉我你的最终目标是什么，也许我可以提出一个替代建议。
但是这个 URL 是为嵌入目的而创建的，为什么src=https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR 工作得很好？和document.getElementById("myIframe").src =https://datastudio.google.c... 不行，有什么区别？