在javascript中从onbeforeprint中排除特定元素

excluding particular elements from onbeforeprint in javascript

本文关键字：元素 排除 javascript 中从 onbeforeprint      更新时间：2023-09-26

我更熟悉CSS编码，而不是Javascript，所以当我被要求找到一种在打印过程中而不是在屏幕上显示链接URLS的方法时，我遇到了一些麻烦。使用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之类的东西；这只会让成品看起来一团糟。有没有办法将页面的某些部分（如ID为Navigation的UL列表）从javascript中的onbeforerint/onafterprint函数中排除？

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手册。

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

看看我创建的这个JSfiddle来测试它。如果你在浏览器中运行打印预览，你就能看到右边的链接！

希望这有帮助：）

相关文章：