Change Iframe src based on user input

Question

I can't seem to find anything that works, but I need some html that makes an iframe based on what url entered into a text box. I use iframes to unblock websites on my school chromebook but its a hassle if I want to just check a website and see how it works on an iframe by making a whole new website. I just wanted something to easily preview a URL in an iframe.

score 1 · Accepted Answer · answered Aug 08 '21 at 21:20

In order to change the iframe source, you'd need a listener for when the input changes and when it does, change the source of the iframe by updating the src property. Setting up the listener, you could do something like this:

// Grab the element by ID
document.getElementById("example_input")
  // Add the event listener to "input" 
  .addEventListener("input", exampleFunc);
  
function exampleFunc(event){
  // Grab iframe by ID
  let iframe = document.getElementById("example");
  // Update the source
  
  // First grab the input that was typed into
  let input = event.target;
  // Next get the value of that input
  let newUrl = input.value;
  
  // Now update the "src" property of the iframe
  iframe.src = newUrl;
}

<html>

<head></head>

<body>
  <input type="url" value="https://example.com" id="example_input">
  <iframe id="example" src="https://example.com" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>

</html>

Although in this case, you may not want to update it every input but rather when a user stops typing, which has a solution in this question.

Please also note that many websites will not allow for iframes to make connections for various reasons (X-Frame-Options header, Content Security Policies, etc.), with examples of sites that won't work being Google and YouTube.

Change Iframe src based on user input

1 Answers1