3

私は Javascript よりも CSS コーディングに精通しているので、印刷時にリンク 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 などを印刷する必要はありません。完成品が乱雑に見えるだけです。ページの特定のセクション ( Navigationの ID を持つ UL リストなど) を javascript の onbeforeprint/onafterprint 関数から除外する方法はありますか?

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

ページ上のすべてのリンクの配列と、除外要素内のリンクの 1 つ (ここでは "navBar" の ID) を取得します。次に、ページ上のリンクをループ処理するときに、それらが除外配列に含まれているかどうかを最初に確認し、含まれていない場合にのみアクションを実行します!

その条件のために、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 に答える