Create an iframe from a input

Coding Help
,
1

Hey,

So I am trying to create a basic site that has a input box that can be used to input a URL, once a button is pressed the URL that is inputed will turn into a iframe under the input.

(My school doesn’t block sites in iframes so this will be used to unblock sites.)

The website is http://education.glitch.me

The code is here: Glitch :･ﾟ✧

If anyone knows how to do this I would love your help.

Fwi: I am not very advanced in javascript/html hence me asking here.

2

Despite your less than noble goal, I can’t help but lend a hend with the technical question, so…

    <input id="url" />
    <button onclick="unblock()">
      Unblock!
    </button>
    <hr />

    <iframe id="newSite" src="https://stegriff.co.uk"></iframe>

  1. Add a default iframe with an id. It needs a src, but many sites, including ‘google.com’ will refuse to load inside an iframe (this might be a problem for your idea in general…)

  2. Change unblock to unblock() as above; you need to call the function by adding the parentheses.

You were pretty close with your script js:

function unblock() {

  let iframe = document.getElementById('newSite');
  let url = document.getElementById('url');
  iframe.src = url.value;
  
}

Grab the iframe, grab the url. You need to use url.value to get what was typed into the box. Use it to set iframe.src.

Works for me in my tests, but beware some sites that don’t load, and if you’re using the https version of your glitch app, you can only load https addresses.

Good luck!

3 Likes
3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.