看点：
1、file_get_contents超时控制。
2、页面编码判断。
3、键盘Enter键捕捉响应。
4、键盘event兼容处理。//event = event || window.event;
5、XMLHttpRequest 和 jQuery 两种实现方案。
6、页面及源码同时展示。
XMLHttpRequest版本 get_web.php
<?php header("Content-type: text/html; charset=utf-8"); if(!empty($_POST['input_text'])) { ini_set('default_socket_timeout', 10); if(!$data = file_get_contents($_POST['input_text'])) { echo "Time out!"; return ; } $charset_pos = stripos($data,'charset'); if($charset_pos) { if(stripos($data,'utf-8',$charset_pos)) { echo iconv('utf-8','utf-8',$data); }else if(stripos($data,'gb2312',$charset_pos)) { echo iconv('gb2312','utf-8',$data); }else if(stripos($data,'gbk',$charset_pos)) { echo iconv('gbk','utf-8',$data); } return; } echo $data; }else { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Get Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript"> function createXMLHTTP() { try { var request = new XMLHttpRequest(); } catch(e1) { var arrVersions = ["Microsoft.XMLHTTP","MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp.5.0"]; for(var i=0;i < arrVersions.length;i++){ try{ request = new ActiveXObject(arrVersions[i]); }catch(e2){ request = false; } } } return request; } function ajax_post(url, params, target_id) { request = new createXMLHTTP(); request.onreadystatechange = function() { if (this.readyState == 4) if (this.status == 200) if (this.responseText != null) document.getElementById(target_id).innerHTML = this.responseText; } request.open("POST", url, true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.setRequestHeader("Content-length", params.length); request.setRequestHeader("Connection", "close"); request.send(params); } var checked = false; function check_(value) { checked = value; } function get_key(event) { event = event || window.event; if(event.keyCode==13 && checked != false) { var url = document.getElementById('input_text').value; if(url != '') { get_page(); }else { document.getElementById('input_text').onfocus(); return false; } } } function get_page() { var url = document.getElementById('input_text').value; if(!url) { return false; }else { if(document.getElementById('output_page').innerHTML != '') { document.getElementById('output_page').innerHTML = ''; } } if(url.indexOf('http://') == -1) { url = 'http://'+url; } ajax_post( '<?php echo $_SERVER['PHP_SELF']; ?>', 'input_text='+url, 'output_page' ); document.getElementById('click_show').style.display = 'block'; document.getElementById('back_a').href = document.location.href; document.getElementById('origin_website').href = url; } </script> <style> .div_box{ margin-top:10px; } .input_box{ border:1px solid; margin-left:10px; margin-top:2px; height:15px; float:left; size:32 font-size: 14px; } .button_box{ float:left; height:23px; padding-bottom:3px; } .hide_box{ display:none; } .a_box{ margin-left:10px; margin-top:3px; height:15px; float:left; font-size: 14px; } .clear_box{ height:50px; } </style> </head> <body onkeydown="get_key(event)"> <div class="div_box"> <input id="input_text" class="input_box" type="text" value="" onclick="check_(true)" onblur="check_(false)"></input> <input type="button" class="button_box" onclick="get_page()" value="Get it!" ></input> <div id="click_show" class="hide_box"> <a id="origin_website" class="a_box" href="#" target="_black">访问原站</a> <a id="back_a" class="a_box" href="#">后退</a> </div> </div> <div class="clear_box"></div> <div id="output_page"></div> </body> </html> <?php } //End_php
jQuery 版本 get_web.php
<?php header("Content-type: text/html; charset=utf-8"); if(!empty($_POST['input_text'])) { ini_set('default_socket_timeout', 10); if(!$data = file_get_contents($_POST['input_text'])) { echo "Time out!"; return ; } $charset_pos = stripos($data,'charset'); if($charset_pos) { if(stripos($data,'utf-8',$charset_pos)) { echo iconv('utf-8','utf-8',$data); }else if(stripos($data,'gb2312',$charset_pos)) { echo iconv('gb2312','utf-8',$data); }else if(stripos($data,'gbk',$charset_pos)) { echo iconv('gbk','utf-8',$data); } return; } echo $data; }else { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Get Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).keyup(function(e){ e = e || window.event; if(e.keyCode == 13 && $("#input_text").val() != '') { $(".button_box").click(); } }); $(".button_box").click(function(){ if($("#input_text").val() == '') { $("#input_text").addClass('errorTips').focus(); return false; }else { $("#input_text").removeClass('errorTips'); } $.ajax({ url: '<?php echo $_SERVER['PHP_SELF'] ?>', data: 'input_text='+$("#input_text").val(), type:'POST', success:function(msg){ $(".html_tips").show(); $("#origin_website").attr('href',$("#input_text").val()); $("#back_a").attr('href',document.location.href); $("#click_show").show(); $("#output_page_html").empty().val(msg).css({height:parseInt($(document).height()-100)}).show(); $("#output_page").empty().html(msg).show(); } }); }); }); </script> <style> .div_box{ margin-top:10px; } .input_box{ border:1px solid; margin-left:10px; margin-top:2px; height:15px; float:left; size:32 font-size: 14px; } .button_box{ float:left; height:23px; padding-bottom:3px; } .hide_box{ display:none; } .a_box{ margin-left:10px; margin-top:3px; height:15px; float:left; font-size: 14px; } .clear_box{ height:50px; } .error_tips{ border:1px solid red; } #output_page_html{ 960px; margin:0 auto; } .html_tips{ float: left; margin: 0 21px; font-size:1.8em; } </style> </head> <body> <div class="div_box"> <input id="input_text" class="input_box" type="text" value=""></input> <input type="button" class="button_box" value="Get it!" ></input> <div id="click_show" class="hide_box"> <a id="origin_website" class="a_box" href="#" target="_black">访问原站</a> <a id="back_a" class="a_box" href="#">后退</a> </div> </div> <div class="clear_box"></div> <div class="html_tips hide_box">站点</div> <div id="output_page"></div> <div class="html_tips hide_box">站点源码</div> <textarea id="output_page_html" class="hide_box"></textarea> </body> </html> <?php } //End_php