Назначение таблицы стилей в JavaScript создает хороший HTML, но не показывает стили - PullRequest
Новая
       8

Назначение таблицы стилей в JavaScript создает хороший HTML, но не показывает стили

2 голосов
/ 17 марта 2009

У меня есть некоторый Javascript, который открывает пустое окно, присваивает ему таблицу стилей и затем записывает в нее текст. Это все работает нормально, за исключением того, что к контенту не применяются стили.

Код выглядит так: 

var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');
var style = newWindow.document.createElement('link');
style.type = "text/css";
style.rel = "stylesheet";
style.href = "styles/style.css"; 
newWindow.document.getElementsByTagName("head")[0].appendChild(style);
newWindow.document.body.innerHTML="<p class='verystylish'>Hello world!</p>";

Если я использую инструменты Firefox Web Developer для просмотра сгенерированного источника, сохраню его в виде html-файла, а затем открою html-файл вручную, он правильно применяет стили, поэтому выглядит так, как будто мне нужно что-то делать браузер, чтобы применить стили или перерисовать страницу как-нибудь. Есть предложения?

Отредактировано, чтобы добавить, сгенерированный источник выглядит так: 

<html>
  <head>
    <title></title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  <head>
  <body>
    <p class='verystylish'>Hello world!</p>
  </body>
</html>

Проблема в том, что стиль абзаца не назначен. Но открытие файла с тем же исходным кодом отображается правильно.

Ответы [ 3 ]

6 голосов
/ 18 марта 2009

По умолчанию открывается новое окно с URL-адресом «about: blank». По этой причине относительные ссылки URL не будут работать. Чтобы изменить расположение окна в соответствии с исходным документом, позвоните по номеру

. 
newWindow.document.open();

Затем вы должны написать скелет документа, который вы хотите в окне. Вы можете включить таблицу стилей сейчас, если хотите, так как document.write является более надежным способом добавления таблицы стилей в более старые браузеры, чем методы DOM. Этот метод также позволяет вам написать DOCTYPE, чтобы вы не оказались в режиме Quirks. 

newWindow.document.write(
    '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">'+
    '<html><head>'+
    '  <link rel="stylesheet" href="styles/style.css">'+
    '</head><body>'+
    '</body></html>'+
);
newWindow.document.close();
1 голос
/ 17 марта 2009

Firefox неправильно настраивает базовый URL, поэтому относительная ссылка /styles/styles.css нигде не указывает (или, по крайней мере, такое впечатление я получил, генерируя элемент в новом окне а затем попросить соответствующие браузеры скопировать ссылку в буфер обмена).

Что может означать, что это может сработать, если вы загрузите пустой HTML-документ (а не about: blank), в котором есть правильный базовый URL-адрес для работы. В прошлом мне приходилось делать что-то похожее (сохраняйте копию about: blank), потому что я получал предупреждение о показе смешанных защищенных / незащищенных элементов.

1 голос
/ 17 марта 2009

Что вы подразумеваете под «это правильно применяет стили»? Вы говорите о классе = "очень стильный"? Если это так, то это вовсе не означает, что стили применяются вообще, а то, что новый элемент абзаца имеет этот класс.

Вы ничего не пишете в окно, кроме этого

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...