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