|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<title>Simple, lightweight jQuery Program to get website title and screenshot</title> <div style="text-align:center; width:80%; margin:0 auto;"> <h3>Simple, lightweight jQuery Program to get website title and preview</h3> <b>Enter Full Website URL:</b><br/> <input type="text" id="url" placeholder="http://www.coding4developers.com" style="width:250px;"> <br/> <button id="getPreview">SUBMIT</button> <br/> <span id="msg" style="color:green; font-size:20px;"></span> <br/> <span id="title"></span></br> <img src=""> <br/> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { $('#getPreview').click(function(){ $("#msg").html("Loading Preview Please Wait.."); $("img").attr('src', ""); var url = $("#url").val(); $.ajax({ url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true', context: this, type: 'GET', dataType: 'json', timeout: 60000, success: function(result) { var imgData = result.screenshot.data.replace(/_/g, '/').replace(/-/g, '+'); $("img").attr('src', 'data:image/jpeg;base64,' + imgData); $("#msg").html(''); $('#title').html(result.title); }, error:function(e) { $("#msg").html("Error to fetch image preview. Please enter full url (eg: http://www.coding4developers.com/)"); } }); }); }); </script> |
