2013-10-25 3 views
2

У меня довольно странная проблема при использовании window.print().
У меня есть страница, которая должна иметь другую раскладку печати, чем то, что обычно отображается пользователю. Таким образом, я создал наложение, которое отображается, когда пользователь нажимает кнопку print, а затем запускает window.print(). Все работает отлично, за исключением неизвестной причины, когда окно печати отображается не один раз. Если я нажму кнопку «Печать» в первый раз, я получу окна печати 2 раза, второй раз я получаю его 4 раза.Странная проблема на window.print()

HTML:

<div id="printDiv" style="position: fixed; overflow: auto; top: 0px; width: 100%; height: 100%; background: white; z-index: 9999;display: none;"> 
    The print page content 
</div> 

JavaScript:

function show_print(){ 
    $('body').css('overflow', 'hidden'); 
    $('html,body').animate({ scrollTop: 0 }, 'fast', function() { 
     window.print(); 
    }); 
} 

Любые идеи, что причиной этого?

+1

Не могли бы вы использовать медиа-запросы вместо JavaScript? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – jasonscript

+0

Медиа-запросы близки, но не правы. Правило '@ media' - это то, что он должен использовать. https://developer.mozilla.org/en-US/docs/Web/CSS/@media –

+1

Я тестировал это в скрипке: http://jsfiddle.net/wBSBu/3/, и он печатает дважды, если я меняю только один селектор '$ ('html')', он будет печатать только один раз. http://jsfiddle.net/ThFvD/, так как я предполагаю, что animate привязывает себя к анимации каждого свойства объекта, повторяя его дважды. Но я не совсем уверен, что это ответ =) – MackieeE

ответ

4

Я считаю, что это может быть потому, что вы выбираете two elements, стреляя дважды, когда он выполняет итерации по каждому элементу, найденному в селекторе jQuery.

Таким образом, регулируя его $('html') теге только:

$('html').animate({ scrollTop: 0 }, 'fast', 'swing', function() { 
    window.print(); //Prints once 
}); 

Скрипки: http://jsfiddle.net/ThFvD/

Смежные вопросы