Javascript OpenWindow не загружается таблица стилей не работает - PullRequest
Новая
       8

Javascript OpenWindow не загружается таблица стилей не работает

0 голосов
/ 12 июня 2018

У меня есть документ с таблицей и кнопкой «Печать».Кнопка печати вызывает функцию javascript для создания версии для печати в новом окне.Версия для печати должна загрузить таблицу стилей с сайта.Однако таблица стилей не загружается.И когда я открываю исходный код из только что открытого окна, хотя таблица стилей href -appears- правильная, нажатие на нее ничего не делает.Очевидно, что мой браузер не распознает его как правильный href.

SO: Почему тег ссылки не распознается как href?

Вот функция javascript: 

jQuery("div.jch-noise_records span.print_button a").on('click', function(e) {
     e.preventDefault();                 
     var getpanel = document.getElementById("jch-noise_records");
     var MainWindow = window.open('', '', 'height=500,width=800');
     MainWindow.document.write('<!DOCTYPE html>\r\n');
     MainWindow.document.write( '<html lang="en-US">\r\n<head>\r\n');
     MainWindow.document.write( '<title>Noise Records Report</title>\r\n');
     MainWindow.document.write( '<link rel="stylesheet" href="http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css" type="text/css" media="all" />\r\n');
     MainWindow.document.write( '</head>\r\n');
     MainWindow.document.write( '<body>\r\n');                  
     MainWindow.document.write( getpanel.innerHTML);
     MainWindow.document.write( '\r\n</body>\r\n</html>\r\n');
     MainWindow.document.close();
     MainWindow.document.focus();        
//   MainWindow.print();                     
     return true; 
});

А вот немного HTML, сгенерированного в окне печати: 

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Noise Records Report</title>
<link rel='stylesheet' href='http://example.com/wp-content/plugins/jchwebdev-noise_by_hour/jchwebdev-noise_by_hour.css' type='text/css' media='all' />
</head>
<body>
<span class="close"><a title="Close" href="#">X</a></span><div class="jch_table_wrapper"><p class="header"><span class="report_date">2018-06-12 18:00</span><span class="report_title">Noise By The Hour (Checkbox Detail)</span><span class="report_ip">71.231.25.83</span></p><p class="header"><span class="report_query">For  date &gt;= 2018-01-01 AND date &lt;= 2018-05-31</span></p><table id="jch-noise_by_hour" class="jch-noise"><tbody><tr class="total"><td colspan="5">Total of  <span>151 </span> days tracked for <span></span> at <span> 12AM</span> from <span>01/01/2018</span> to <span>05/31/2018</span><br>
                                                                Average noise: <span>82.8dbA</span><br>
                                                                Total # of events detected: <span>12,153</span><br>                                                             
                                                                Average number of events/hour: <span>6</span></td></tr>
</tbody></table></div>
</body>
</html>

1 Ответ

0 голосов
/ 13 июня 2018

Хотя Я предполагаю о том, почему это проблема, я хотел поместить этот ответ здесь для наглядности, так как похоже, что он работал на основекомментарии к вопросу.

Я считаю, что новое всплывающее окно (или новая вкладка в зависимости от настроек пользователя) не загружается и не отображает связанный CSS из-за какой-то проблемы безопасности / контекста.

Поскольку выполняемый вами вызов window.open(url, name, params); передает пустую строку для параметров url и name, я считаю, что это устанавливает новое окно в контекст "протокола" или "домена", отличный отваша начальная страница, И связанный CSS-файл.

Кто-то вроде @ EricLaw может подтвердить это подозрение, но я считаю, что "" (пустая строка), "about:blank" и"javascript:" вызывает некоторые специальные ~ песочницы ~ при использовании для всплывающих окон / iframes.

Все это говорит о том, что если вы установите URL-адрес вашего первоначального вызова window.open () как фактическую страницу HTML (это может быть пустышкаб) с вашего сервера ... а затем вставьте нужную ссылку CSS и контент для отображения в теле ... это решает эту проблему.

...