如何将 iframe src 更改为变量答案

【问题标题】：How to change iframe src to be variable如何将 iframe src 更改为变量
【发布时间】：2021-11-25 13:25:19
【问题描述】：

我在 HTML 嵌入式组件中使用以下代码来显示以下 URL

"https://datastudio.google.com/embed/reporting/fkfkfkfkfffkkf/page/gurVC"

我从以下函数（在代码中）收到了这个 URL

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;
    }
  };
  
  //...
  
</script>

这意味着 receivedData ="https://datastudio.google.com/embed/reporting/fkfkfkfkfffkkf/page/gurVC"

但是现在我怎样才能把这个变量放到 iframe 源中呢？我试图这样做src=receivedData，但它不起作用。

<!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) {
       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>

【问题讨论】：

标签： javascript html embed

【解决方案1】：

您可以使用 javascript 填充 iframe src 属性。通过 ID 获取 iframe 并用您的数据填充 src 属性。

<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>

这应该会在您收到数据后立即填充 iframe 上的 src 属性。

参考w3schools iframe src property

【讨论】：