jquery 为什么这种基于JavaScript的打印会导致Safari刷新页面?

vdzxcuhz  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(85)

我正在处理的页面执行了一个JavaScript函数来打印页面的部分内容。出于某种原因,在Safari中打印会导致窗口以某种方式更新。我说不知何故,因为它并不像重新加载页面那样真正刷新,而是从start开始“渲染”页面,即。滚动到顶部,Flash动画从0开始,等等。
这种效果是由这把小提琴再现的:http://jsfiddle.net/fYmnB/
在Safari中单击打印按钮并完成或取消打印会导致屏幕“变白色”一秒钟,这在我的真实的网站中表现为“类似”重新加载。在运行打印按钮时,比如说,Firefox,只是打开和关闭打印对话框,而不会以任何方式影响fiddle页面。
我调用浏览器print方法的方式是否有什么原因导致了这种情况,或者如何解释-最好是避免?
PS:在我的真实的网站上,Chrome也发生了同样的情况。不过,在这个例子中,fiddle Chrome似乎没有显示出与Safari相同的行为。
编辑:我还尝试将打印按钮放在与a锚点不同的标记上,如spanbutton,但这对解决问题没有帮助。
编辑:我在Mac OS 10.6.8上使用Safari 5.1.2时遇到了这个问题。在jsfiddle示例中,单击打印按钮并关闭(打印或中止)打印对话框后,行为显示为覆盖整个浏览器的白色“ Flink ”。
编辑:刚刚开始这个问题的赏金,因为我仍然在寻找这种浏览器行为的解释。我非常愿意就这个问题给予更多细节。从我的经验,所以这是不adviseable张贴链接到在线网页,但我觉得这个问题是真的很难重现。我认为我在发布的jsfiddle中经历的“ Flink 和重新渲染”希望是同一问题的结果。
编辑:正如在评论中所解释的,打开一个包含应用程序当前状态的新窗口,然后打印并关闭该窗口,可能是一个修复方法,但我不认为这是对手头问题的充分答案。

pxyaymoc

pxyaymoc1#

如果你找不到解决问题的方法,你可以通过以下方式快速解决:var win=window.open()你在同一个页面上,然后win.print()它,然后win.close()。希望这对你有帮助。

sxpgvts3

sxpgvts32#

很遗憾,我没有解决办法。但既然我能够在Safari和Webkit中用小提琴重现这一点,我想我至少会提供我的观察结果:
1.如果您立即点击“打印”对话框按钮,则不会出现空白。您需要等待几秒钟才能看到白色。在OSX 10.6.8上,我看到了由旋转的沙滩球的外观标记的阈值。
1.当鼠标在单击“打印”按钮后保持静止时,页面将保持白色,直到您再次移动鼠标(beachball仍在旋转)。
希望这会有所帮助。

lnlaulya

lnlaulya3#

我不确定这是否能解决你的问题,但我最近发现了一个非常好的Jquery插件,可以只打印网页的某些部分。
你应该给予一试:)它有一些非常酷的参数来根据你的需要定制它。
看看here
为什么页面会刷新?这是我的答案。print()函数将打印页面的全部内容。所以,既然我读到你只想打印页面的一部分,我猜你正在使用一些函数从页面中删除所有不需要的内容,然后调用window.print()函数,然后将所有原始内容再次放在屏幕上。这会导致一个非常短的闪光,看起来像你的页面正在刷新,并将再次加载所有闪光部分。
我昨天遇到了同样的问题,这个jquery插件真的帮了我。我希望它也能帮助你。
祝你今天愉快!

xv8emn3q

xv8emn3q4#

由于window.print()看起来就是not part of any standard,浏览器可以自由地以任何方式实现它。
如果你真的必须保持页面原样,我能看到的唯一解决方法是打开另一个窗口并打印它。这是一个完整的其他,可能更糟,蠕虫罐。

hl0ma9xz

hl0ma9xz5#

在你的函数中试试这个:

document.write("<script type='text/javascript'>window.print()</script>");

字符串
我引用这个堆栈:
After window.open, can't print in Safari for Mac

更新,尝试:

document.writeln("<script type='text/javascript'>window.print()</script>");

njthzxwz

njthzxwz6#

我也遇到了同样的问题,发现下面是一个简单易行的解决方案。
使用event.preventDefault();创建自己的打印函数。
我在我的页面上做了一个类似的标准打印按钮,并使用onclick将其绑定到一个自定义打印函数:

<button onclick="printOut()">Print</button>

字符串
printOut();的函数很简单,应该是这样的:

function printOut() {
   event.preventDefault();
   print();
}


这样,当用户打印页面时,页面不会在之后刷新。它似乎只是简单地调用打印函数,并按原样返回到网页。需要注意的是,从你最初的帖子中,我使用@media查询来打印页面的某些部分,而不是JavaScript。但我确实想创建一个JavaScript按钮来打印,以便鼓励用户打印页面。
我在Safari(16.5.1)和Chrome(114.0.5735.198)中测试了这个功能。
这篇文章是对使用event.preventDefault();的一个很好的复习:https://www.freecodecamp.org/news/manage-default-behavior-in-browser/的数据。
希望这对你有帮助!我知道这已经晚了11年。
🤷🏽

相关问题