Display webpage in iframe dynamically

Question

I want an input field with a submit button and a separate iframe where I can display a website made up from the input field. I have tried all sorts of things but nothing works. Can someone please tell me how I can achieve that. The text input field is a key to the page I want to display. What I want to do is to define an iframe with a page from my website and when the user enters a code in the text box, the iframe should display another page from my website. I want to run everything on my PC and nothing on the server. Below is my code:

<!DOCTYPE html>
<html>
<body>
  <div id="app">
  </div>
<style>
  #boxes {
    content: "";
    display: table;
    clear: both;
    width: 145%;
  }

div {
  float: left;
  height: 100px;
  width: 100%;
  padding: 0 0px;
}

#column0 {
  width: 5.9%;
}

#column1 {
  width:29.4%;
}

body {
  font-family: sans-serif;
  color:white;
  display: grid;
  height: 80vh;
  place-items: start;
  overflow-x:hidden;
}
</style>

<script>

  document.getElementById("app").innerHTML = `

    <main id="boxes">
    <div id="column0">
      <h4></h4>
    </div>
    <div id="column1">
      <input id="pageId" name="pageId" type="text" required minlength="1" 
      maxlength="4" pattern="[a-z0-9]+">
      <button id="pageIdBtn">Page ID</button>
    </div>
</main>
`;

var x = document.getElementById("pageIdBtn");
x.addEventListener("click", pageIdFunction);

function pageIdFunction() {
  var pageIdToInvoke = document.getElementById("pageId").value;
  var myPage = "mywebsite/" + pageIdToInvoke;
  var el = document.getElementById('userPage');
  el.src = myPage;
};

</script>

<iframe name="userPage" src="mywebsite/home" style="width:1500px; height: 
750px;">
</iframe>

</body>
</html>

Answer 1

Try This:

 $('input#url').on('propertychange paste keyup',function(){ var url = this.value; $('#frame').attr('src', url); });

 iframe { position:fixed; top:5; left:0; bottom:0; right:0; width:100%; height:90%; border:none; margin:0; padding:0; z-index:99999; }

 <:DOCTYPE html> <html> <head> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min:js"></script> <meta charset=utf-8 /> <title>display-webpage-in-iframe-dynamically</title> </head> <body> <input type="text" id="url" name="url" value="https://"> <iframe src="" id="frame"></iframe> </body> </html>

If this helps please Up vote and mark as answer

Display webpage in iframe dynamically

Question

1 answers

solution1
0 2021-02-26 02:31:19

Display webpage in iframe dynamically

Question

1 answers

solution1 0 2021-02-26 02:31:19

solution1
0 2021-02-26 02:31:19