Question

我想在打印网页之前使用jQuery将数据添加到当前网页。原因是我在我的网站上有一个数字简历，并且不希望我的网站上的个人信息可用于抓取工具等。我创建了一个XHR请求，以便在打印之前获取我的个人信息，并希望将数据注入HTML 。当用户打印时，我发现this script可以找到jQuery。这一般工作正常，但问题是脚本工作“太慢”，这意味着在弹出打印对话框之前不会附加数据。这是我的HTML代码：

<div>
    <span id="cvnameplaceholder">My Name</span><br />
    <span id="cvstreetplaceholder"></span><br />
    <span id="cvcityplaceholder"></span><br /><br />
    <span id="cvemailplaceholder"></span>
</div>

这是返回类似{street: 'ABC', city: 'DEF', email: 'mail@example.com}

的数组的jQuery代码

$(document).ready(function() {
    var beforePrint = function() {
        $.post("./api/RequestHandler.php", {request : "getCVInformation"}, function (response) {
            response = JSON.parse(response);
            $('#cvstreetplaceholder').text(response.street);
            $('#cvcityplaceholder').text(response.city);
            $('#cvemailplaceholder').text(response.email);
        })
     };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
}());

当我再次点击打印按钮时，信息就在那里。那么在显示实际的印刷对话之前是否有可能添加一些文字？

Answer 1

现在大量的抓取工具既可以解析js，也可以执行它并解析结果，因此这可能无法保密您的信息。

那就是说，看起来你的问题是你没有停止这个事件，你只是挂了它。事件监听器正在调用beforePrint，但它不会阻止任何其他事件触发该事件 - 在这种情况下，是实际的打印对话框。

此外，您还通过ajax请求加载数据，这是异步的。如果您以某种方式将数据存储在本地javascript变量中并填充页面，您可能会很幸运并在打印对话框实际打开之前加载了文本。但是，您遇到了与其他答案https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/相关联的页面上提到的同一类问题，其中有人混合了实际打印的低分辨率和高分辨率图像。也就是说，在打印事件冒泡之前，ajax请求是发送并触发打印对话框，但是在浏览器已经呈现之后，响应将返回打印页面。

您需要使用停止传播事件（https://api.jquery.com/event.stoppropagation/），然后在实际获得信息后在帖子的回调中重新触发打印事件。这就是为什么你第二次看到那里的信息的原因;它实际上是您第一次看到的信息。

以下是捕获和阻止事件的示例，然后在数据到达并加载后重新触发事件：

$(document).ready(function() { var beforePrint = function(e) { e.stopPropagation(); $.post("./api/RequestHandler.php", {request : "getCVInformation"}, function (response) { response = JSON.parse(response); $('#cvstreetplaceholder').text(response.street); $('#cvcityplaceholder').text(response.city); $('#cvemailplaceholder').text(response.email); window.print(); }); }; if (window.matchMedia) { window.matchMedia('print').addListener(function(mql) { if (mql.matches) { beforePrint(); } }); } window.onbeforeprint = beforePrint; }());

值得注意的是，正如该链接页面所述，onbeforeprint活动是IE5 +和Firefox 6 +，window.matchMedia是Chrome 9+和Safari 5.1，而Opera不支持或者两者似乎都有各种未解决的问题。因此，您很可能最终会得到一份缺少您的联系信息的简历。

Answer 2

我知道这并没有直接回答这个问题，但你可以在你的CV内容中使用iframe并使用nofollow / noindex来防止索引。此解决方案处理追加内容，但它不使用jQuery。

的index.html

<html>
    <head>
        <style>
            iframe {
                border: none;
            }
            .cv {
                display: none;
            }
            @media print {
                .cv {
                    display: block;
                }
            }
        </style>
    </head>
    <div class="cv">
        <iframe src="cv.html"></iframe>
    </div>
</html>

cv.html

<html>
    <head>
        <meta name="robots" content="noindex,nofollow">
    </head>
    <body>
        My CV Details
    </body>
</html>

在打印之前使用jQuery附加数据

2 个答案: