如何在 link 鼠标悬停文本中生成目标网页标题？

Question

我有一个博客，我在其中以特定方式格式化 links，通过添加 mouseover/hover 文本和 link 的基本描述，格式如下：{page title} [by {author(s)} @ {publication date & time}] | {website}.这里是 a screencap with an example.

正如您想象的那样，为每个 link 手动输入标题文本会非常烦人。我已经这样做多年了，我非常想找到一种自动化的方法。

有没有办法在整个网站的 link 鼠标悬停文本中自动生成目标网页的标题，可能还有 site/domain？（理想情况下，它的格式应如上所示，包括作者和发布 date/time 等等，但这对我来说可能涉及太多编码。）

请记住，我对HTML和CSS的把握只有中等self-taught。

更新： 下面的 Anik Raj 提供了一个完美的答案 – 一些 JS 来生成带有目标页面标题的鼠标悬停工具提示 – 但我无法获得脚本在我的 Blogger 博客上工作。我首先将代码保存到我的 Dropbox 中的一个 .js 文件中，并尝试使用以下代码（对其他外部 JS 脚本工作正常）linking 到它：

<!-- Link hover title preview script (source:  -->
<script async='async' src='https://dl.dropboxusercontent.com/s/h6enekx0rt9auax/link_hover_previews.js' type='text/javascript'/>

……但是什么也没有发生。当我在页面 HTML 中插入脚本时，出现以下错误 (screencap here) 并且 Blogger 不让我保存模板：

Error parsing XML, line 4002, column 21: The content of elements must consist of well-formed character data or markup.

我对代码一无所知，包括JS，所以我不知道如何修复它。我试过几个在线 JS 验证工具；有些人在那里发现错误，有些则没有。它显然在 JSFiddle Anik provided.

中工作得很好

如果有人可以修复代码使其在 Blogger 中正常运行，那么您就是我的英雄。

Answer 1

编辑：这只在同一个域下有效，因为其他域已禁用 CORS。

最简单的方法是将 java 脚本文件添加到 html 文件。

这是一个简单的脚本，用于将 link 的标题设置为其悬停文本。

<script type = "text/javascript">
//get all links on the webpage
var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {
(function(i) {
    // for every link, make a request using its href property and fetch its html
    var request = makeHttpObject();
    request.open("GET", links[i].href, true);
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            //on request received, process the html and set the title parameter
            const doc = new DOMParser().parseFromString(request.responseText, "text/html");
            const title = doc.querySelectorAll('title')[0];
            if (title) links[i].setAttribute("title", title.innerText)
        }
    };
})(i);
}

//helper function to create requests
function makeHttpObject() {
try {
    return new XMLHttpRequest();
} catch (error) {}
try {
    return new ActiveXObject("Msxml2.XMLHTTP");
} catch (error) {}
try {
    return new ActiveXObject("Microsoft.XMLHTTP");
} catch (error) {}
throw new Error("Could not create HTTP request object.");
} 
</script>

将此脚本添加到末尾将为所有 link 添加悬停文本。

查看此 JS Fiddle 示例 -> https://jsfiddle.net/mcdvswud/11/

如何在 link 鼠标悬停文本中生成目标网页标题？

How to generate target webpage title in link mouseover text?

html

javascript

blogger

hyperlink