Question

我有一个博客，我以特定的方式格式化链接，方法是使用以下格式添加带有链接基本描述的鼠标悬停/悬停文本：{page title} [by {author(s)} @ {publication date & time}] | {website}。这是a screencap with an example。

您可以想象，为每个链接手动输入标题文本会非常烦人。多年来我一直这样做，我渴望自动化它。

是否有办法在整个网站的链接鼠标悬停文本中自动生成目标网页的标题，可能还有网站/域名？（理想情况下，它将按照上面的说明进行格式化，包括作者和发布日期/时间等等，但这可能会对我进行太多编码。）

请记住，我只有适度的，自学成才的HTML和CSS。

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

<!-- Link hover title preview script (source: https://stackoverflow.com/questions/49950669/how-to-generate-target-webpage-title-in-link-mouseover-text/49951153#49951153) -->
<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文件中。

这是一个简单的脚本，可以将链接标题设置为悬停文本。

<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>

将此脚本添加到最后会将悬停文本添加到所有链接。

请参阅此JS小提琴示例 - ＆gt; https://jsfiddle.net/mcdvswud/11/

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

1 个答案: