使用ajax将事件中的url加载到qtip中

时间:2018-01-14 05:09:45

标签: javascript ajax google-chrome-extension event-handling

我有一个chrome扩展,必须在工具提示中显示链接的预览。现在我可以使用文本显示URL但是当它被传递到ajax部分时我不知道如何将url作为事件或元素传递。现在它显示浏览器所在的同一页面作为java脚本的新手,jQuery对我有很大的帮助。

jQuery(function($){
$('body').on('mouseenter', 'a', function(e) {
    var o = this;
    let url = this.url;
    if ( o.href != '#' ) {
        chrome.extension.sendRequest('show', function(r) {
            var uri = $.url.parse(o.href),
                position,
                text = uri.source.replace(uri.host, '<span style="color:' + r.domaincolor + '">' + uri.host + '</span>');

            // Check if is a tooltip or not
            if (r.istooltip) {
                position = {
                    my: 'top left',
                    target: 'mouse',
                    viewport: $(window),
                    adjust: {
                        y: +25
                    }
                }
            } else {
                position = {
                    my: r.position,
                    at: r.position,
                    target: $(window),
                    adjust: {
                        y: ( r.position === 'left bottom' ? -20 : 0 )
                    }
                }
            } 

            // Is the target a new window?
            if ( $(o).attr('target') == '_blank' ) text = '<i class="fa fa-external-link-square" style="padding-right: 5px;"></i>' + text;

            // Show the qtip
            $(o).qtip({
                overwrite: false,
                content: {
                    text: function(event, api) {
                        $.ajax({
                            url: api.elements.target.attr('e.url') // Use href attribute as URL
                        })
                        .then(function(content) {
                            // Set the tooltip content upon successful retrieval
                            api.set('content.text', content);
                        }, function(xhr, status, error) {
                            // Upon failure... set the tooltip content to error
                            api.set('content.text', status + ': ' + error);
                        });

                        return 'Loading...'; // Set some initial text
                    }

                },
                show: {
                    event: e.type,
                    ready: true,
                    delay: r.time
                },
                hide: {
                    fixed: true
                },
                position: position,
                style: {
                    classes: 'qtip-dark',
                    tip: {
                        corner: false
                    }
                }
            }, e);
        })
    }
}).on('mouseleave', 'a', function(e){
    $(this).qtip('destroy');
})
});

提前致谢。

0 个答案:

没有答案