title: How to embed iFrame with external website
body: <p>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 <code>src</code> attribute is loaded directly using <code>.attr</code> property of <code>jquery</code>.</p>
  
  <p>Working example without the text field:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="mydiv"&gt;
       &lt;iframe id="frame" src="" width="100%" height="300"&gt;
       &lt;/iframe&gt;
   &lt;/div&gt;
   &lt;button id="button"&gt;Load&lt;/button&gt;
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>$(document).ready(function(){
  $("#button").click(function () { 
      $("#frame").attr("src", "https://www.wikipedia.org/");
  });
  });
  </code></pre>
  
  <p>Below is what I want</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Enter the URL
      &lt;input id="url" type="text"/&gt;
        &lt;div id="mydiv"&gt;
               &lt;iframe id="frame" src="" width="100%" height="300"&gt;
               &lt;/iframe&gt;
           &lt;/div&gt;
           &lt;button id="button"&gt;Load&lt;/button&gt;
  </code></pre>
  
  <p><strong>Script</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $("#button").click(function () { 
      var x = $("#url").val();
          $("#frame").attr('src', 'x');
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I referred this <a href="https://stackoverflow.com/questions/7177080/how-do-i-load-an-url-in-iframe-with-jquery">SO LINK</a> but could not find the answer. My JSfiddle novice attempt tells an error message as <code>{"error": "Please use POST request"}</code>. Do I need to use <code>load</code> jquery method. I just want to read the content of textbox and open the page in iframe with a buttons click. <a href="https://jsfiddle.net/d0nqj9pm/" rel="nofollow noreferrer">Link to my JSFiddle</a></p>