Question

我对CSS编码比使用Javascript更熟悉，所以当我的任务是找到一种在打印时但不在屏幕上显示链接URL的方法时，我遇到了一些麻烦。使用CSS，我可以管理我想要的东西，但是由于Internet Explorer的怪癖，我必须找到解决问题的JavaScript解决方案。

我能够通过此代码解决我的困境，使链接URL在打印时显示，然后在打印预览关闭时从页面上消失。

window.onbeforeprint = function(){
var links = document.getElementsByTagName("a");
for (var i=0; i< links.length; i++){
    var theContent = links[i].getAttribute("href");
    if (!theContent == ""){
        links[i].newContent = " [" + theContent + "] ";
        links[i].innerHTML = links[i].innerHTML + links[i].newContent;
        }
    }
}
window.onafterprint = function(){
var links = document.getElementsByTagName("a");
for (var i=0; i< links.length; i++){
    var theContent = links[i].innerHTML;
    if (!theContent == ""){
        var theBracket = theContent.indexOf(links[i].newContent);
        var newContent = theContent.substring(0, theBracket);
        links[i].innerHTML = newContent;
        }
    }
}

然而，现在我的问题变成了打印所有页面链接URL。但是，显然，我不需要打印内部导航URL等内容;这只会使成品看起来凌乱。有没有办法从javascript中的onbeforeprint / onafterprint函数中排除页面的某些部分，例如ID为 Navigation 的UL列表？

Answer 1

getElementsByTagName可以用作任何DOM节点的方法。因此：

var links = document.getElementById('showURLs').getElementsByTagName('a');

在父母

上使用ID

只需使用上述内容替换代码中links的变量定义即可。像这样：

window.onbeforeprint = function(){

    var links = document.getElementById('showURLs').getElementsByTagName('a');
    for (var i=0; i< links.length; i++){
        var theContent = links[i].getAttribute("href");
        if (!theContent == ""){
            links[i].newContent = " [" + theContent + "] ";
            links[i].innerHTML = links[i].innerHTML + links[i].newContent;
        }
    }

}

window.onafterprint = function(){

    var links = document.getElementById('showURLs').getElementsByTagName('a');
    for (var i=0; i< links.length; i++){
        var theContent = links[i].innerHTML;
        if (!theContent == ""){
            var theBracket = theContent.indexOf(links[i].newContent);
            var newContent = theContent.substring(0, theBracket);
            links[i].innerHTML = newContent;
        }
    }

}

排除特定元素的子元素

window.onbeforeprint = function(){
    var links = document.getElementsByTagName("a");
    var exclude = document.getElementById("navBar").getElementsByTagName("a");
    for (var i=0; i< links.length; i++) {
        if (!in_array(links[i], exclude)) {
            var theContent = links[i].getAttribute("href");
            if (!theContent == "") {
                links[i].newContent = " [" + theContent + "] ";
                links[i].innerHTML = links[i].innerHTML + links[i].newContent;
            }
        }
    }
}

我们在页面和排除元素中的一个链接（这里的ID为“navBar”）中获得所有链接的数组。然后，当我们循环浏览页面上的链接时，我们首先检查它们是否在排除数组中，并且只有当它们不是我们的行为时才会发生！

对于那个条件，我们使用bool in_array(needle, haystack)函数，如果在haystack（数组）中找到了针，则返回true，否则返回false。这个函数实际上是PHP本机函数的改编 - 见PHP manual。

function in_array(needle, haystack) {
    for (i=0;i<haystack.length;i++) {
        if (haystack[i] == needle) {
            return true;
        }
    }
    return false;
}

请参阅我创建的JSfiddle来测试它。如果您在浏览器中运行打印预览，您将能够看到右侧的链接！

希望这会有所帮助：）

在javascript中排除来自onbeforeprint的特定元素

1 个答案:

在父母

排除特定元素的子元素