jQuery Load URL in iframe | Lessoncup Programming Blog

Sunday, 10 November 2013

jQuery Load URL in iframe

Hi, today i am going to tell you how to load an url in iframe using jquery. you can display any website in iframe by entering a url address in textbox, i have developed this concept using jqury it is just few line of code.



HTML

take an iframe to display the website, and take one input box to enter the website url address, put one loader div also, because it will take time to display the website into iframe
<div id="lessoncup">
<div style="width:200px; margin:0 auto; margin-top:10px; margin-bottom:10px;">
<input name="" type="text" class="box" id="box"/>
<br>
ex: <strong>http://www.lessoncup.com</strong></div>

<div id="loader"></div>

<iframe class="result" id="result"></iframe>

</div>

CSS

<style>

.result{width:777px;border:solid #ccc 1px;margin:10px;padding:10px; margin:0 auto; display:none;}


.box{ width:200px; height:20px;padding:5px; border:solid #ccc 1px; resize:none; margin-bottom:5px;}
</style>

Javascript

write the keyup function to box div and get the value of input box and store in one url_text variable, here we need to match the url format to regular expression, use match() method to match the both elements and put it in if condition,

inside the condition just show the loader image and add the src attribute to iframe using attr() method, if the elements are not matched to regular expression display the message to user to enter proper url.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#box').keyup(function(){
  
  var url_text=$(this).val();
  
  $("#loader").fadeIn(400);
  
  var url_format=/\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i;
  
  if(url_text.match(url_format)){
   
   
   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Extracting URL</span>');
   
   $("#result").fadeIn(400).attr('src',url_text);
   
   $("#result").height($(window).height());
   
   $("#loader").fadeOut(400);

  }else{
   
   $("#loader").html('Add <b>http:// </b> before www');
   $("#result").fadeOut(400);
  }
  
 });
 
  
});

</script>

Live Demo   Download Script

2 comments :

  1. make video extrator for youtube,metacafe,and etc,and it should appear like facebook videos extractor....its more important

    ReplyDelete
  2. This is nice. But is it possible to send request header to cross domain iframe url?

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons