2011-09-01 14 views
5

Używam kodu z odpowiedzi this, aby wydrukować oddzielną stronę bezpośrednio z przycisku drukowania. Użytkownik klika przycisk drukowania, a adres URL jest wysyłany do funkcji drukowania. Funkcja drukowania ładuje osobną stronę do elementu iframe display:none i wypisuje iframe onLoad. Działa w IE, Chrome, ale nie w Firefoksie. W firefox ładuje stronę do elementu div, ale nigdy nie drukuje lub otwiera okno dialogowe drukowania. Okazuje się, firefox nie drukuje iframe, jeśli jest ustawiony na display:none jak poniżej:Firefox nie będzie drukował elementu iframe z wyświetlaczem: brak

<div id="printerDiv" style="display:none"></div> 

Jest to oczekiwane zachowanie? Wszystkie inne przeglądarki drukują, myślę o zamieszczeniu w Bugzilli. Próbowałem trochę "trików" css, aby div nie wyświetlał się tam, gdzie użytkownik może je zobaczyć, ale zawsze jest w jakiś sposób widoczny. Obecnie używam poniżej CSS aby iframe niewidzialną:

#printerDiv iframe{ 
width:1px !important; 
height:1px !important; 
border:0 !important; 
margin:0 !important; 
} 

Ale to marże nadal istnieją i pozostawić szczelinę 14px gdy iframe jest generowany. Czy jest jakiś sposób, aby element iframe nie był widoczny? przy wszystkich bez atrybutu display:none? Jeszcze lepiej, czy jest jakiś sposób na zrobienie tego bez takiego hackowania?

Próbowałem nawet używać CSS do ustawiania iframe na display:block @ media typów plików i display:none dla ekranu, funkcja JS nadal nie będzie drukować.

+0

Być może URL znajduje się w innej domenie. –

+0

To nie jest fakt, że przekazuję link względny. Próbowałem bezwzględnego łącza, ale dostaje ten sam problem. –

+1

Po prostu absolutnie umieść element iframe na stronie .. – GAgnew

Odpowiedz

4

Jeśli koniecznie umieścić swój iFrame poza stronę, to nadal będzie wydruku nie będąc widocznym dla użytkownika.

#printerDiv iframe{ 
    position: absolute; 
    top: -1000px; 
} 
+0

Jeszcze raz dziękuję. Tylko atrybuty position/top okazały się niezbędne, ponieważ element iframe nie jest już widoczny. –

0

Jeśli kontrolować zawartość iframe, sprawiają, że drukowanie się:

<script type="text/javascript"> 
window.print() 
</script> 
+0

Dodanie tego tekstu do dokumentu źródłowego ROZPOCZĄĆ okno dialogowe drukowania w firefoxie, jeśli źródło jest otwarte (czego staram się uniknąć, jest to zadanie drukowania bezpośredniego). Jednak nie działa on w iframe 'display: none', więc mój przycisk wciąż nie działa –

+0

Zaktualizowałem pytanie, problem nie jest JS, to jak Firefox obsługuje style najwyraźniej. –

+0

Zamiast tego ustaw jeden piksel na jeden piksel. –

1

Miałem dokładnie ten sam problem. Gdy atrybut wyświetlania ma wartość none, Firefox zwraca 0 dla $('#printerDiv').css('height'), $('#printerDiv')[0].style.height lub gdy outerHeight() lub są wywoływane na elemencie.

Użyłem z-index dla tego, który nie wiąże cię do używania position:absolute.

Tak, można mieć to w pliku css:

#printerDiv { z-index: -10; } 

Wtedy, gdy chcemy, aby było widoczne, wystarczy ustawić z-index użyciu jquery css() połączenia.

+0

Wypróbuję to rozwiązanie tak szybko, jak tylko będę mógł, jak gdyby działało lepiej niż absolutne pozycjonowanie. –

+0

Tak, wiem. :) Musiałem to sobie wyobrazić niedawno. Ponadto, jeśli używasz pozycjonowania absolutnego, może być trochę lepiej używać 'widoczności: ukrytej' niż' display: none'. – Navneet

+0

Element zajmuje znaczną widoczność: ukryty nie działa, a ustawienie szerokości/wysokości również go nie ukrywa. To rozwiązanie działa doskonale w przeglądarkach Firefox i Chrome. Nadal nie jestem w IE, ale myślę, że będę musiał zrobić osobne rozwiązanie dla IE w ogóle. –

Powiązane problemy