3

我对 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 列表？

4

1 回答 1

0

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)函数，如果在大海捞针（一个数组）中找到针，则返回 true，否则返回 false。这个函数实际上是对 PHP 原生函数的改编——参见PHP 手册。

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

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

希望这可以帮助 ：）

于 2013-07-09T16:35:28.137 回答