如何显示从悬停链接提取的内容

How to Display Content Extraction from Links on Hover

本文关键字：提取 链接 悬停 何显示 显示      更新时间：2023-09-26

即兴:为了向用户展示任意网页的摘要，如标题，图像和元描述，我如何根据其URL从文档检索元数据和图像，并且当有人在嵌入的URL上悬停时作为帖子中的链接。

提示这种效果:http://rap.genius.com/Casey-veggies-the-boy-lyrics

由于同源策略限制，您将无法在客户端执行此操作。您将需要服务器端代码来完成大部分工作。用您选择的服务器端语言创建一个处理程序，该处理程序接受一个URL，在服务器端请求它，解析响应，从解析的文档中提取所需的信息，并返回JSON。您可以使用类似于phantomjs的东西在服务器上执行文档解析。

然后，只需从代码中调用该页面即可:

$("a[href^=http]").hover(function(e) {
    var url = encodeURIComponent(this.href);
    $.get("/summary?url=" + url, function(summary) {
        // use data from summary to create popup
    });
}, function(e) {
    // hide popup
});

你可以动态地创建你的链接细节元素，当你悬停在一个链接，并再次删除它，当你悬停。您不需要将弹出内容添加到实际的DOM中。你可能想要为弹出窗口设置CSS，尽管这也可以在你在JS中创建元素时设置。

JS添加链接详情弹出窗口:

  $('.hoverLink').hover(
    function(){
      var myHref = $(this).attr('href');
      var myTitle = $(this).attr('title');
      $(this).append('<div class="hoverDetail"><p>HREF: ' + myHref+ '</p><p>TITLE: ' + myTitle + '</div>');
    }, 
    function(){
      $('.hoverDetail').remove();
    });

CSS使弹出窗口显示在链接

下
.hoverLink {
  position: relative;
}
.hoverDetail {
    border: 4px solid #eee;
    position: absolute;
    top: 20px;
    background: white;
    width: 200px;
}

演示:http://plnkr.co/edit/fl1PkASx4gPro8hKGR9Z?p=preview

更新为全文!

根据你发布的链接:

JSFIDDLE 

$(document).ready(function(){
    //creates an info div. you could also add some style here. 
    //i added it seperatly in jsfiddle
    var div = $("<div class='info'></div>");
    //adds the info div to body
    //of course you can add it to any other element that you can select
    $('body').append(div);
    //add a hover effekt to all links. 
    //here you better use a class like e.g. .myHoverLinks
    $('a').hover(function(){
        //THIS PART IS CALLED ON MOUSEIN
        //set some content for infodiv and show it
        $(div).html('Mouse Hover. On out, window will hide. Hovering: ' + $(this).html()).show();
    },function(){
        //THIS PART IS CALLED ON MOUSEOUT
        //check if infodiv is hovered
        if($(div).is(":hover"))
        {
            //i added this to keep info alive as long as you hover it
            $(div).hover(function(){},function(){$(this).hide();});
        }
        else
        {
            //hides info if you leave with mouse in way up...
            $(div).hide();
        }
    });    
});
相关文章：