问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JS跨域抓取HTML页面并解析

社区维基
1
新手上路，请多包涵

RT，想通过JS抓取远端的HTML页面并解析页面（能分别解析tag最好，不能的话正则吧）获取内容
不是node.js就是本地的javascript(或者jquery)
想知道这种想法能实现么？

javascripthtmljqueryajax正则表达式
阅读 79.8k
7 个回答
得票最新
头像
cattail
    83631113
    ✓ 已被采纳

    same origin policy

    页面中的Javascript只能读取，访问同域的网页。这里需要注意的是，Javascript自身的域定义和它所在的网站没有任何关系，只和该Javascript代码所嵌入的文档的域有关。如以下示例代码：

    <!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>This is a webpage came from http://localhost:8000</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
  <div id="test">123</div>
  <script type="text/javascript">
    console.log($('#test').text());
  </script>
</body>
</html>

    该HTML文档来源于http://localhost:8000，这意味着它的域为http://localhost:8000(域和端口也相关)，虽然页面中的jquery加载自ajax.googleapis.com，然而该JQuery的域只和它所处的HTML文档的域有关，从而可以访问该HTML文档的属性，因而以上代码可以正常运行。
    附：使用上述代码的原因是，开发者将通用的Javascript库(如JQuery)地址指向公共相同的URL。当用户加载过一次该JS后，以后的加载将都通过浏览器缓存，从而加快了页面加载速度。

    从这个角度看问题，假如提问者所知的远端指的是互联网上任意的页面，那么不能实现你所期望的功能；如果远端指的是提问者你所拥有控制权的网站，请看下面的Relaxing the same-origin policy；

    Relaxing the same-origin policy

    1. Document.domain：用于子域名的情况。对于多个windows(一个页面有多个iframe)，通过设置document.domain的值为相同的域，使得Javascript可以访问异域window；
    2. Cross-origin resource sharing：通过在服务器端返回头增加Access-Control-

    Allow-Origin，该头部包含了所有允许访问的域的列表。支持的浏览器将允许本页面Javascript访问这些域；

    1. cross-document messaging：该方式和域无关，不同文档的Javascript可以相互发送接受消息而不受限制，然而不能主动趣读取，调用另一个文档的方法属性；

    如果提问者拥有远端页面的控制权，可以尝试第二种方法。

    服务器端抓取

    根据提问者的需求，比较可行的方案应该是在服务器端进行处理。借助(http://phantomjs.org/)，你可以使用Javascript语法在服务器端进行DOM操作，同时你可以使用nodejs进行进一步的分析等，当然，你也可以使用Python, php ,Java语言进行后续操作。

    参考资料

    同源策略
    http://en.wikipedia.org/wiki/Same_ori...
    Google Hosted Libraries
    https://developers.google.com/speed/l...
    Cross-origin resource sharing
    http://en.wikipedia.org/wiki/Cross-or...
    http://www.w3.org/TR/cors/
    phantomjs
    https://github.com/ariya/phantomjs

    头像
    蒋颿
      124212

      nodejs做采集可行，但是受制于并发性效率不会很高，你说的本地js是指什么？jquery不是前端框架么，浏览器端通常不支持跨域访问，非要在浏览器端实现的话，可以考虑用ajax回调

      这里有个nodejs的完整方案，希望能有帮助
      http://blog.nodejitsu.com/jsdom-jquer...

      头像
      deemstone
        89256

        关于phantomjs的使用，我刚刚写了一篇吐槽《让人欢喜让我忧的phantomjs》
        http://blog.cooer.net/2014/让人欢喜让我忧的phantomjs/

        我的项目中用phantomjs抓取并分析网页，需求涉及到抓取、dom操作、截图、多任务并行、Nodejs做任务管理……

        这东西，不适合大批量抓取网页的生产环境使用，极其不稳定，API太少。用作自动化测试还可以，因为访问的是特定几个页面，对稳定性不很敏感的场景。

        现在正在考虑尝试用WebDriver做抓取的事情，更真是的浏览器环境，API比phantomjs丰富，而且已经提上了W3C标准。
        http://www.w3.org/TR/webdriver/

        头像
        felix021
          13.4k73238

          网页上的js本身没法完成，还是得服务端加个代理。

          头像
          Libo
            1.5k102428

            如果你有远端服务器的权限，可以配置CORS，允许你的JS跨域抓取~

            如果你木有远端服务器的权限，则需要用到代理~
            一个超简单的PHP代理例子：proxy.php

            <?php
    $html = file_get_contents('http://www.example.com/');
    echo $html;
?>
            头像
            neekey
              2712710

              其实最大的限制就是其他人都提到的跨域问题。

              跨域问题只能通过代理来解决，比如你写一个Server，专门写一个暴露给JS调用的接口用于抓取页面。

              对于JS解析HTML的情况，答题思路两种：

              1、真的做解析。这一块的库肯定有人已经写好了。建议直接到Github上搜索下.
              2、讲抓取到的网页内容潜入到dom中，让浏览器帮你渲染好。然后你可以用JQ等方式简单地去获取你要的节点内容。

              注意如果是第二点，你需要注意的是：
              1、过滤掉内容中的script等标签，避免脚本执行
              2、直接放在内存中渲染，不用append到页面，避免对你自己页面的影响。

              头像
              princehaku
                1
                新手上路，请多包涵
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                被 3 篇内容引用
                推荐问题
                宣传栏