Question

我有一个包含href链接的许多<a>标签的html文件。

当这些链接指向外部url (http://....)或内部链接时，我希望页面不执行任何操作。

最终目标是让html页面脱机使用而不会有任何断开的链接。有什么想法吗？

我尝试使用Python脚本来更改所有链接，但它非常混乱。

目前，我正在尝试使用JavaScript和$("a").click(function(event) {}之类的调用来处理这些点击，但这些点击并未脱机。

此外，缓存页面不是一个选项，因为它们永远不会在线打开。从长远来看，这可能还需要适应src属性，并将用于数千个html文件。

最后，最好只使用标准库和内置库，因为在最终解决方案中可能无法访问外部库。

更新：这是我到目前为止所尝试的内容：

//Register link clicks
$("a").click(function(event) {
    checkLink(this, event);
});

//Checks to see if the clicked link is available
function checkLink(link, event){

    //Is this an outside link?
    var outside = (link.href).indexOf("http") >= 0 || (link.href).indexOf("https") >= 0;

    //Is this an internal link?
    if (!outside) {
        if (isInside(link.href)){
            console.log("GOOD INSIDE LINK CLICKED: " + link.href);
            return true;
        }
        else{
            console.log("BROKEN INSIDE LINK CLICKED: " + link.href);
            event.preventDefault();
            return false;
        }
    }
    else {
        //This is outside, so stop the event
        console.log("OUTSIDE LINK CLICKED: " + link.href);
        event.preventDefault();
        return false;
    }
}

//DOESNT WORK
function isInside(link){
    $.ajax({
        url: link, //or your url
        success: function(data){
            return true;
        },
        error: function(data){
            return false;
        },
    })
}

也是一个例子：

<a href="http://google.com">Outside Link</a>             : Do Nothing ('#')
<a href="https://google.com">Outside Link</a>            : Do Nothing ('#')
<a href="/my/file.html">Existing Inside Link</a>         : Follow Link
<a href="/my/otherfile.html">Inexistent Inside Link</a>  : Do Nothing ('#')

Answer 1

以下是一些阻止您访问外部网站的JavaScript：

var anchors = document.getElementsByTagName('a');
    for(var i=0, ii=anchors.length; i < ii; i++){
        anchors[i].addEventListener('click',function(evt){
            if(this.href.slice(0,4) === "http"){
                evt.preventDefault();
            }
        });
    }

编辑：至于在客户端检查本地路径是否良好，您必须发送和调用ajax，然后检查呼叫的状态代码（臭名昭着的404）。但是，您无法从静态html文件（例如file：//index.html）执行ajax。它需要在某种本地服务器上运行。

Here是另一个讨论该问题的stackoverflow。

Answer 2

基于Javascript的解决方案：

如果您想使用javascript，可以通过将$ .ajax（）设置为非异步来修复isInside()函数。这将导致它在返回之前等待响应。见jQuery.ajax。请注意同步请求可能暂时锁定浏览器的警告，在请求处于活动状态时禁用任何操作（这可能对您的情况有利）

而不是做一个＆＃39; GET＆＃39;这是$ .ajax（）默认执行的操作，您的请求应该是＆＃39; HEAD＆＃39; （假设您的内部网络服务器没有禁用对此HTTP谓词的响应）。＆＃39; HEAD＆＃39;就像＆＃39; GET＆＃39;除了它没有返回响应的主体。因此，无需下载整个资源，就可以了解Web服务器上是否存在资源

// Formerly isInside. Renamed it to reflect its function.
function isWorking(link){
    $.ajax({
        url: link,
        type: 'HEAD',
        async: false,
        success: function(){ return true; },
        error: function(){ return false; },
    })
    // If we get here, it obviously did not succeed.
    return false;
}

基于Python的解决方案：

如果您不介意预处理html页面（甚至缓存结果），我会使用像BeautifulSoup这样的库来解析Python中的HTML。

基本上，我会找到页面上的所有链接，并将{http：1}}替换为http或https的href属性#。然后，您可以使用requests之类的库来检查内部网址，并按照建议更新相应的网址。

在脱机HTML中删除损坏的链接

2 个答案: