Unbreakable Unbreakable - 6 days ago 5
HTML Question

How to embed iFrame with external website

I am learning web development and trying to achieve task of adding external webpage to a simple HTML page. So, I have a text box where I need to put the URL and based on that the iframe should render.
Webpage renders properly when

src
attribute is loaded directly using
.attr
property of
jquery
.

Working example without the text field:

HTML

<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300">
</iframe>
</div>
<button id="button">Load</button>


SCRIPT

$(document).ready(function(){
$("#button").click(function () {
$("#frame").attr("src", "https://www.wikipedia.org/");
});
});


Below is what I want

HTML

Enter the URL
<input id="url" type="text"/>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300">
</iframe>
</div>
<button id="button">Load</button>


Script

<script>
$(document).ready(function(){
$("#button").click(function () {
var x = $("#url").val();
$("#frame").attr('src', 'x');
});
});
</script>


I referred this SO LINK but could not find the answer. My JSfiddle novice attempt tells an error message as
{"error": "Please use POST request"}
. Do I need to use
load
jquery method. I just want to read the content of textbox and open the page in iframe with a buttons click. Link to my JSFiddle

Answer

Can you try this simple example - I've defaulted the input to https://en.wikipedia.org but you can try other URLs in there.

$(document).ready(function(){
  $("#button").click(function () { 
      var url = $('#url').val();
      $("#frame").attr("src", url);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
    <input id="url" type="text" value="https://en.wikipedia.org"/>
     <iframe id="frame" src="" width="100%" height="300">
     </iframe>
 </div>
 <button id="button">Load</button>