【问题标题】：Change iframe dynamically - Java scirpt and HTML embeded动态更改 iframe - Javascript 和 HTML 嵌入
【发布时间】：2021-10-06 18:52:07
【问题描述】：

我正在尝试动态更改 iframe 链接

因此，当我单击按钮（单独的代码）并将 URL 发送为event.data 时，会调用以下代码

window.onmessage = (event) => {
if (event.data) {
  
 document.getElementById("myIframe").src=event.data

  
}


 }

这是所有代码，代码正在运行，但嵌入式网站闪烁显示并消失，这是为什么？我该如何解决这个问题？

<!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=event.data

      
    }
  
 }

</script>
  
</head>

<body>
  <div class='embed-container embed-responsive embed-responsive-4by3'>
  <iframe id="myIframe" src="/default.asp" width="600" height="9000"  frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

</body>

</html>

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

Javascript

<script>
function myFunction() {
    url = document.getElementById('newURL').value;
    url = url.replace(/^http:\/\//, '');
    url = url.replace(/^https:\/\//, '');
    url = "https://" + url;
    document.getElementById('myframe').src = url;
};
</script>

HTML

<input type="button" id="mybutton" value="Home Page" onclick="myFunction()" />
<input type="text" id="newURL" />
<iframe id="myframe" src="">

</iframe>

来源：I need to dynamically update an iframe using an input from a user

【讨论】：

但是当我使用 document.getElementById('myframe').src = url;在 on msg 函数里面它是闪烁的
闪烁是什么意思？