Jquery - 如何使用鼠标悬停将<link />属性添加到标头中

Question

我做了一些prefetch和prerender的实验。这是一个很棒的扩展！问题是我在网上商店的许多商品页面上有很多链接（商品链接，分页，链接到子类别......）。并且我无法将所有链接添加到标题中以进行预取和预渲染。因此，我的想法是，如果用户使用鼠标光标悬停链接，则会立即将链接添加到标题中。我用chrome开发工具手动尝试了它，它可以工作。只要我将属性添加到标题中，Chrome就会预取链接。

有没有人知道怎么做？

Answer 1

$( "#element" ).mouseover(function() {
    link=document.createElement('link');
    link.href='href';
    link.rel='rel';
    link.id ='linkid'; //you may save it for future purpose - like removing it, or check next time event happen if link already created so don't add it again.

    $('head').append(link);  //bring it to BOTTOM of head includes
});

如果你想将新的link添加到head的头部，请使用：

$('head').prepend(link); 

而不是

$('head').append(link); 

修改 纯JavaScript版本（只是第一个选项 - 附加到底部）：

document.getElementById("demo").addEventListener("mouseover", addHeadStyle);
//Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

function addHeadStyle() {
    link = document.createElement('link');
    link.href = 'href';
    link.rel = 'rel';
    link.id = 'linkid'; //you may save it for future purpose - like removing it, or check next time event happen if link already created so don't add it again.

    document.getElementsByTagName('head')[0].appendChild(link);
};