Replacing content within a div with an iframe

Question

I am trying to replace the content of a div with an iframe that allows the user to input a URL to display another page. I will, ideally, add another button next to the Change URL button that links to a specific page.

However, I cannot get this code to work. I can get the div to be replaced with text and some html. But the iframe code won't load when I put this in. I am suspecting it's due to the quotation marks.

I am a bit of a novice at javascript/JQuery so any help with this will be greatly appreciated.

Here is what I have going for the code below.

        <style>
    #target {
        width: 200px;
        height: 340px;
    }
    </style>
    <script>
    $(function load($){
        var $iframe = $('#target'),
            $change = $('#change'),
            $url = $('#url');

        $change.click(function url() {
            $iframe.attr('src', $url.val());
        });
    });

    document.getElementById("c_emot").innerHTML = "<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br>
<button id="change" type="button">Change URL</button>";
    </script>

Answer 1

This demo has 2 features:

1. Using the text input, user can enter a URL to change the src of the iframe.*

   • This is possible by using this function:

     function changeSrc(src) { var iframe = document.getElementById('site'); site.src = src; }

   • *Be aware that not all sites are iframe friendly, so expect some sites that my function will simply not work for.

2. Notice the links to various sites. Their behavior has been alter--rather than jumping to the site, it opens the site within the iframe.

   • Each link is a normally constructed anchor element <a> with one exception. It's value for their attribute target is site.
   • site is the name of the iframe. When an anchor has target="name of iframe"` the anchor opens the site within that targeted iframe.
   • This must be the iframe's name attribute not the iframe's id.

Snippet

function changeSrc(src) {
  var iframe = document.getElementById('site');
  site.src = src;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

<form id="form" onchange="changeSrc(url.value);">
  <fieldset>
    <legend>Enter URL</legend>
    <input id="url">
    <input type="submit" />

  </fieldset>
</form>
<a href="/" target="site">ROOT</a>&nbsp;&nbsp;<a href="http://example.com" target="site">Example</a>&nbsp;&nbsp;<a href="http://w3schools.com" target="site">W3Scools</a>&nbsp;&nbsp;<a href="https://jsfiddle.net/user/dashboard/" target="site">jsFiddle</a>&nbsp;&nbsp;
<a
href="https://www.jsdelivr.com" target="site">jsDelvir</a>&nbsp;&nbsp;<a href="http://javascript.info" target="site">JavaScript Tut</a>&nbsp;&nbsp;<a href="https://plainjs.com/" target="site">Plain JS</a>
  <section>
    <iframe id="site" name="site" src="/" width="100%" height="100%" frameborder="0"></iframe>
  </section>

Answer 2

Your quoted string is all wrong. Try this:

document.getElementById("c_emot").innerHTML = '<iframe id="target" src="/"></iframe><br>
<input id="url" type="text"><br><button id="change" type="button">Change URL</button>';

for reference: http://www.javascripter.net/faq/quotesin.htm

Also, your click event is not being bound to the button after the button is created. You can make it persistent on the button's container like this:

$('#c_emot').on('click', '#change', (function(){
  $('#target').attr('src', $('#url').val());
});

And if youre going to mess with the DOM, you have to be sure that the element you want to manipulate has already been created when your code is run:

$(document).ready(function(){
   // put all your code here
});

but maybe you should be creating elements instead of dumping markup into the container:

document.onreadystatechange = function () {
  if(document.readyState == "complete") {
    var container = document.getElementById("c_emot");

    var iframe = document.createElement('iframe');
    iframe.src = "/";
    container.appendChild(iframe);

    var input = document.createElement('input');
    input.id = "url";
    input.type = "text";
    container.appendChild(input);

    var button = document.createElement('button');
    button.id = "change";
    button.innerHTML = "Change URL";
    button.addEventListener('click', function() {
        iframe.src = input.value;
    });
    container.appendChild(button);
  }
}

Not sure if that event listener will work, got to try it and see :)

Have you tried just doing it without messing around with the DOM?...

<iframe name="urlbox"></iframe>
<input type="text" id="urlinput" />
<button onclick="window.open(document.getElementById('urlinput').value, 'urlbox')">Navigate!</button>

Most browsers wont let you navigate the iframe to a different domain for security anyway, so maybe this is all for nothing.