我正在尝试添加 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 行为以触发打印预览?
最佳答案
我能够通过删除类并添加我自己的类来更改 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 脚本和打印预览插件时,您会抛出错误。必须修改打印预览。
这是第 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;
问题已解决。
关于javascript - jQuery 打印预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11379461/