js抓取网页内容(这里有新鲜出炉的Javascript教程,程序狗速度看过来!)

优采云 发布时间: 2021-11-30 13:01

  js抓取网页内容(这里有新鲜出炉的Javascript教程,程序狗速度看过来!)

  这里有一个新发布的Javascript教程,来看看程序狗的速度吧!

  JavaScript 客户端脚本语言 JavaScript 是一种基于对象的动态类型区分大小写的客户端脚本语言,由 Netscape 的 LiveScript 发展而来,由 Netscape 的 LiveScript 发展而来。主要目的是解决服务端语言,如Perl,遗留的Speed问题,为客户提供更流畅的浏览效果。

  本文文章主要介绍JavaScript的history API,使搜索引擎能够抓取AJAX内容相关信息。有需要的朋友可以参考

  大家在浏览Facebook相册的时候有没有注意到,页面部分刷新时地址栏中的地址也发生了变化,并不是hash方法。它使用了 HTML5 历史上的几个新 API。作为窗口的全局变量,历史在 HTML4 时代并不是什么新鲜事。我们经常使用 history.back() 和 history.go()。

  一直觉得没办法,直到两天前看到Discourse创始人之一Robin Ward的解决方案,忍不住尖叫起来。

  

  Discourse 是一个严重依赖 Ajax 的论坛程序,但它必须让 Google收录 内容。它的解决方案是放弃hash结构,使用History API。

  所谓History API,就是在不刷新页面的情况下,改变浏览器地址栏中显示的URL(准确的说是改变网页的当前状态)。这是一个示例,您单击上面的按钮开始播放音乐。然后,点击下面的链接看看发生了什么?

  

  地址栏中的网址已更改,但音乐播放并未中断!

  History API 的详细介绍超出了本文章的范围。简单的说到这里,它的作用就是给浏览器的History对象添加一条记录。

  

window.history.pushState(state object, title, url);  

  上面这行命令可以让地址栏中出现一个新的 URL。History对象的pushState方法接受三个参数,新的URL为第三个参数,前两个参数可以为null。

  window.history.pushState(null, null, newURL);

  目前主流浏览器都支持这种方式:Chrome(26.0+)、Firefox(20.0+)、IE(10.0+)、Safari(5.1+)、歌剧 (12.1+)。

  这是罗宾沃德的方法。

  首先,用History API替换hash结构,让每一个hash符号变成一个正常路径的URL,这样搜索引擎就会抓取每一个网页。

  /1

  /2

  /3

  然后,定义一个 JavaScript 函数来处理 Ajax 部分并根据 URL 抓取内容(假设使用 jQuery)。

  

 function anchorClick(link) {

    var linkSplit = link.split('/').pop();

    $.get('api/' + linkSplit, function(data) {

      $('#content').html(data);

    });

  } 

  然后定义鼠标的点击事件。

  

  $('#container').on('click', 'a', function(e) {

    window.history.pushState(null, null, $(this).attr('href'));

    anchorClick($(this).attr('href'));

    e.preventDefault();

  });

  还要考虑用户单击浏览器的“前进/后退”按钮。这时候会触发History对象的popstate事件。

  

 window.addEventListener('popstate', function(e) {

    anchorClick(location.pathname);

  }); 

  定义以上三段代码后,无需刷新页面即可显示正常路径URL和AJAX内容。

  最后,设置服务器端。

  因为没有使用 hashtag 结构,所以每个 URL 都是不同的请求。因此,服务器需要向所有这些请求返回具有以下结构的网页,以防止 404 错误。

  

 

    

      

      

        ... ...

      

    

  

  仔细看上面的代码,你会发现一个noscript标签,这就是秘密。

  我们将所有我们想要搜索引擎的内容放在了 noscript 标签中。在这种情况下,用户仍然可以在不刷新页面的情况下进行AJAX操作,但是搜索引擎会收录每个页面的主要内容!

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线