javascript - How to embed iFrame with external website - Stack Overflow

admin管理员组

文章数量:1315287

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", "/");
});
});

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

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/");
});
});

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

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited May 23, 2017 at 10:30 CommunityBot 111 silver badge asked Dec 1, 2016 at 5:11 UnbreakableUnbreakable 8,1322424 gold badges108108 silver badges190190 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Can you try this simple example - I've defaulted the input to https://en.wikipedia 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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
    <input id="url" type="text" value="https://en.wikipedia"/>
     <iframe id="frame" src="" width="100%" height="300">
     </iframe>
 </div>
 <button id="button">Load</button>

本文标签： javascriptHow to embed iFrame with external websiteStack Overflow