跨域Javascript - 拉元标记

时间:2013-05-22 02:24:28

标签: javascript jquery

我正在构建一个Meteor.js应用程序,我想做的其中一件事就是从保存的页面中提取标题和元描述标签。我正在使用this cross domain program并且有一半的代码正在运行。

这是摘录;它采用标记为“url”的表单中给出的值并运行代码:

$.get(url, function(response){
      if ((suggestedTitle=((/<title>(.*?)<\/title>/m).exec(response.responseText))) != null){
          $('#title').val(suggestedTitle[1]);
      }else{
          $('#title').val(url);
      }
      if ((suggestedDesc=($('meta[name=description]').attr('content'))) != undefined){
        $('#desc').val(suggestedDesc[1]);
      }else{
        $('#desc').val('Description for this page cannot be found.');
      }
   });

我认识到使用正则表达式来解析HTML并不是最好的做法(对替代方案的建议开放但我没有仔细研究过)但除此之外,这个脚本成功地从URL中提取标题或返回网址如果找不到,但说明失败并只返回后备文本。非常感谢一些帮助,谢谢:)

1 个答案:

答案 0 :(得分:1)

不使用正则表达式或jQuery来解析响应,而是使用DOM方法来浏览响应文本。试试这个:

$.ajax({
    url: "http://www.google.com",
    type: "GET",
    async: true
}).done(function (response) {
    var div = document.createElement("div"),
        responseText = response.results[0],
        title, metas, meta, name, description, i;
    div.innerHTML = responseText;
    title = div.getElementsByTagName("title");
    title = title.length ? title[0].innerHTML : undefined;
    metas = div.getElementsByTagName("meta");
    for (i = 0; i < metas.length; i++) {
        name = metas[i].getAttribute("name");
        if (name === "description") {
            meta = metas[i];
            description = meta.getAttribute("content");
            break;
        }
    }
    console.log("Title:", title);
    console.log("Description:", description);
}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log("AJAX ERROR:", textStatus, errorThrown);
});

DEMO: http://jsfiddle.net/KLdsG/3/

我把你提供的插件放在顶部(它缩小了,所以它适合你,你仍然可以看到你自己的代码。

显然,这会使用http://www.google.com,但您应该可以放入任何网址并且它的工作方式相同。此外,您可以将其置于可重复使用的功能中 - 我只想展示一个示例。我认为它与$.get()而不是$.ajax()的工作方式相同。

您无法直接使用response.responseText,因为返回的项目是由一些内容组成的对象。要获取HTML,您可以使用response.results[0]response.results显然是一个数组,我不确定那里还有什么(比如索引1,2,3等)。

当我尝试使用$(response.results[0])时,我发现发生了奇怪的事情,所以我只是坚持使用正常的DOM操作。