CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Unbreakable
Unbreakable

Reputation: 8084

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

Upvotes: 1

Views: 15122

Answers (1)

Robin Mackenzie
Robin Mackenzie

Reputation: 19319

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>

Upvotes: 5

Related Questions