如何将 iframe src 变为变量

Question

I'm using the following code inside HTML embedded component to display the following URL我在 HTML 嵌入式组件中使用以下代码来显示以下 URL

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

I received this URL from the following function (inside the code)我从以下function（代码内）收到了这个URL

<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"这意味着 receivedData ="https://datastudio.google.com/embed/reporting/fkfkfkfkfffkkf/page/gurVC"

But now how can I put this variable into the iframe source?但是现在如何将这个变量放入 iframe 源中呢？ I tried to do it like this src=receivedData but it doesn't work.我试着这样做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>

Answer 1

You could fill the iframe src property with javascript. Get the iframe by ID and fill the src property with your data.您可以使用 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>

This should fill the src property on the iframe as soon as you receive data.这应该在您收到数据后立即填充 iframe 的 src 属性。

For a reference check this out w3schools iframe src property作为参考，请查看w3schools iframe src 属性

如何将 iframe src 变为变量

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-10-05 09:00:05

如何将 iframe src 变为变量

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-10-05 09:00:05

解决方案1
1 已采纳 2021-10-05 09:00:05