2013-06-25 3 views
4

Я хотел бы знать, можно ли распечатать HTML-страницу, содержащую IFRAME, которая охватывает несколько страниц. По какой-то причине браузер продолжает обрезать IFRAME после первой страницы. Вот минималистский пример, демонстрирующий проблему, описанную выше. Во-первых, вот простой HTML страницы, содержащей IFRAME, который должен быть оптимизирован для печати:Как распечатать IFRAME, содержащую многостраничные страницы?

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>TEST</title> 

    <style> 
     html, body { 
      height: 100%; 
     } 

     iframe { 
      width: 100%; 
      height: 100%; 
     } 
    </style> 

    </head> 
    <body> 
    <iframe src="iframe-content.html"> 
    </iframe> 
    </body> 
</html> 

А вот страница, которую я хочу встроить:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>TEST-CONTENT</title> 

    </head> 
    <body> 
    <p> 
     Some very, very long text spawning multiple pages. 
    </p> 
    </body> 
</html> 

Использование JavaScript не вариант. Я ищу решение, которое использует только CSS. Любая помощь будет принята с благодарностью.

+0

Что вы хотите? Что такое прецедент? Вы хотите распечатать весь iFrame, когда кто-то нажимает 'ctrl + p' – raam86

+0

Да, точно: я хочу, чтобы весь IFRAME печатался, когда пользователь нажимает CTRL + P. Вариант использования заключается в том, что я работаю над приложением, которое включает контент из другого приложения. Это строгое требование, чтобы печать работала без применения какой-либо магии JavaScript. –

+0

Как насчет кнопки «print», которая является ссылкой на источник IFrame? Также является iframe из того же домена? – raam86

ответ

0

Вы можете указать в мета-документе родительского документа, поскольку CSS не имеет возможности указать страницу для печати, как она выглядит.

<link rel=alternate media=print href="printme.html"> 

Если вы пытаетесь распечатать весь iframe внутри родителя, вам необходимо встроить специальный документ CSS для печати. использование этого вместе с предварительным просмотром печати поможет вам с нуля.

<link rel="stylesheet" href="print.css" media="print"> 
+0

Большое спасибо за ваш ответ. К сожалению, '' link rel = alternate media = print href = "printme.html"> 'работает только в IE. Что касается специальных CSS-файлов для печати: мы много экспериментировали с ними, но не нашли решения. Можете ли вы быть более конкретным? –

+0

Мне очень жаль, что это не было. ([Это часть спецификации.] (Https://www.w3.org/wiki/HTML/Elements/link#Example_B)) К сожалению, я не смог заставить его работать в Chrome, и я нашел [this Firefox ticket] (https://bugzilla.mozilla.org/show_bug.cgi?id=104618), который, по-видимому, указывает, что они не спешат поддерживать это. –

0

Только решение для CSS - необходимо установить ширину iframe в статический размер. Для A4 Portrait значение ширины около 670 пикселей. Для альбомной печати значение будет другим.

iframe { 
    width: 670px; 
} 

Работа в хромовом браузере.

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