0

I'm trying to change the iframe link dynamically

So the following code is called when I click on the button (separate code) and send the URL as event.data

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

  
}


 }

This is all code, the code is working but the embedded website is blinking show and disappeared why that? how can I solve this issue?

<!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>
idan
  • 1,508
  • 5
  • 29
  • 60

1 Answers1

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>

Source: I need to dynamically update an iframe using an input from a user

Kr4ziDev
  • 52
  • 1
  • 10