如何从网页获取源代码?

时间:2012-06-07 12:55:21

标签: javascript php

我们如何从php和/或javascript中的网页获取网页的源代码?

4 个答案:

答案 0 :(得分:3)

感谢:

首先,您必须知道,您将永远无法获取与javascript中的页面不在同一域中的页面的源代码。 (见http://en.wikipedia.org/wiki/Same_origin_policy)。

在PHP中,您就是这样做的:

file_get_contents($theUrl);

在javascript中,有三种方式:

首先,通过XMLHttpRequest: http://jsfiddle.net/635YY/1/

var url="../635YY",xmlhttp;//Remember, same domain
if("XMLHttpRequest" in window)xmlhttp=new XMLHttpRequest();
if("ActiveXObject" in window)xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4)alert(xmlhttp.responseText);
};
xmlhttp.send(null);

其次,通过iFrames: http://jsfiddle.net/XYjuX/1/

var url="../XYjuX";//Remember, same domain
var iframe=document.createElement("iframe");
iframe.onload=function()
{
    alert(iframe.contentWindow.document.body.innerHTML);
}
iframe.src=url;
iframe.style.display="none";
document.body.appendChild(iframe);

第三,jQuery: http://jsfiddle.net/edggD/2/

$.get('../edggD',function(data)//Remember, same domain
{
    alert(data);
});

答案 1 :(得分:1)

使用jQuery的Ajax示例:

// Display the source code of a web page in a pre tag (escaping the HTML).
// Only works if the page is on the same domain.

$.get('page.html', function(data) {
    $('pre').text(data);
});

如果您只想访问源代码,上面代码中的data参数包含原始HTML源代码。

答案 2 :(得分:1)

在Javascript中,无需使用不必要的框架(在示例api.codetabs.com中,它是绕过跨域资源共享的代理):

fetch('https://api.codetabs.com/v1/proxy?quest=google.com').then((response) => response.text()).then((text) => console.log(text));

答案 3 :(得分:0)

遵循 Google's guide on fetch() 并使用 D.Snap 答案,您会得到如下结果:

fetch('https://api.codetabs.com/v1/proxy?quest=URL_you_want_to_fetch')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.text().then(function(data) {
        // data contains all the plain html of the url you previously set, 
        // you can use it as you want, it is typeof string
        console.log(data)
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

这样您就使用了 CORS 代理,在本例中为 Codetabs CORS Proxy

CORS 代理允许您获取不在同一域中的资源,从而避免同源策略阻止您的请求。 您可以查看其他 CORS 代理:

https://nordicapis.com/10-free-to-use-cors-proxies/