excluding particular elements from onbeforeprint in javascript

Question

I am more familiar with CSS coding than with Javascript, so when I was tasked to find a way to display Link URLS during print but not on-screen, I ran into a bit of trouble. Using CSS, I can manage what I want just fine, but thanks to Internet Explorer's quirkiness, I've had to find a javascript solution to my problem.

I was able to solve my dilemma with this code to make the link URLs display on print, and then disappear off the page when print preview was closed.

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

However, now my problem becomes that ALL the page link URLs are printed. But, obviously, I don't need to print things like the internal navigation URLs; that just makes the finished product look messy. Is there a way to exclude certain sections of the page, like a UL-list with the ID of Navigation, from the onbeforeprint/onafterprint functions in javascript?

Answer 1

getElementsByTagName can be used as a method of any DOM node. Thus:

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

Using an ID on the parent

Simply replace the variable definition for links in your code with the above. Like so:

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

}

Excluding children of a specific element

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

We get an array of all links on the page and one of links in the exclusion element (here with an ID of "navBar"). Then, when we are looping through the links on the page, we first check if they're in the exclusion array, and only if they're not we act!

For that conditional we use the bool in_array(needle, haystack) function, which returns true if the needle is found in the haystack (an array), false otherwise. This function is actually an adaptation of PHP's native function - see PHP manual.

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

See this JSfiddle I created to test it. If you run print preview in your browser, you'll be able to see the links on the right!

Hope this helps :)