jQuery 打印预览

Question

我正在尝试将jQuery Print Preview Plugin 添加到我的网站中，但我使用了 AddThis 的打印选项。我不确定是否可以使用 AddThis 添加打印预览插件。有什么办法吗？

这是我的代码：

JS：

var $j = jQuery.noConflict();
   $j(document).ready(function() {
    $j('a.print-preview').printPreview();
});

添加此代码：

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
 addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print print-preview"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/
   300/addthis_widget.js"></script>

当我点击打印时，它会在 Firefox（或我使用的任何浏览器）中弹出标准打印对话框。

我感觉 AddThis JS 正在使用类似JavaScript:window.print(); 的东西来触发打印对话框，从而绕过了 jQuery 打印预览插件。是否有一种简单的方法可以更改 AddThis 行为以触发打印预览？

Answer 1

我能够通过删除类并添加我自己的类来更改 AddThis 打印按钮的行为。代码如下：

原AddThis代码：

<!-- AddThis Peekaboo Toolbox : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style 
  addthis_default_style addthis_label_style addthis_32x32_style">
<a class="addthis_button_more">Share</a>
<ul>
<li><a class="addthis_button_facebook"></a></li>
<li><a class="addthis_button_twitter"></a></li>
<li><a class="addthis_button_google_plusone_share"></a></li>
<li><a class="addthis_button_email"></a></li>
<li><a class="addthis_button_print"></a></li>
</ul>
</div>
<!-- AddThis Peekaboo Toolbox : END -->
<script type="text/javascript" src="https://s7.addthis.com/js/300/
  addthis_widget.js"></script>

添加页面上显示的代码：

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="addthis_button_print at300b" title="Print" href="#">
  <span class=" at300bs at15nc at15t_print"></span>
      Print
   </a>
 </li>
</ul>

编辑代码更改打印功能和调用打印预览插件：

<div class="addthis_toolbox addthis_peekaboo_style 
   addthis_default_style addthis_label_style addthis_32x32_style">
<!-- Omited code not relevant to print function. --> 
<ul style="display: none;"> <!-- Changes to Display Block on Hover --> 
<!-- Omited code not relevant to print function. --> 
 <li>
  <a class="print-preview at-print">
   <span class="at-print-span"></span>
       Print
   </a>
 </li>
</ul>

正确显示打印的 CSS：

.at-print {
  padding: 0 2px;
  float: left;
  padding: 10px 20px !important;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.at-print-span {
  background-position: 0 -576px !important;
  background: url("//s7.addthis.com/static/r07/widget006_32x32_top.png") 
              no-repeat scroll left center transparent;
  display: block;
  height: 32px !important;
  line-height: 32px !important;
  overflow: hidden;
  width: 32px !important;
 float: left;
}

我不确定是否需要所有 CSS，但它确实有效。

重要提示：

这就是更改打印按钮功能的方式，以便我可以调用 jQuery 打印预览功能。但是，将 AddThis 脚本和 Print Preview Plugin 一起使用时会引发错误。必须修改打印预览。

这是必须在第 44 行执行的操作，您将看到以下代码：

// The frame lives
        for (var i=0; i < window.frames.length; i++) {
            if (window.frames[i].name == "print-frame") {
                var print_frame_ref = window.frames[i].document;
                break;
            }
        }

将上面的代码替换为：

print_frame_ref = print_frame[0].contentWindow.document;

问题已解决。

Answer 2

有两种选择。一种是添加带有打印图标的自定义服务，然后使用它而不是打印 API。

http://support.addthis.com/customer/portal/articles/381245-custom-services

addthis 中还内置了一个 printfriendly API：

http://www.addthis.com/services/list