Как загрузить на страницу CSS, если макет уже построен

css

(Дмитрий Федюк) #1

Обычным способом загрузки стилей (и других браузерных ресурсов) на страницу является вызов метода \Magento\Framework\View\Page\Config::addPageAsset()
Пример: Как загружать или не загружать JavaScript и CSS в зависимости от административных настроек модуля

Однако если макет уже построен (то есть метод \Magento/Framework/View/Layout/Builder::build() уже завершил свою работу), то вызывать \Magento\Framework\View\Page\Config::addPageAsset() смысла нет:он ничего сделать не сможет.

Я нашёл 2 способа решения этой проблемы.

Способ 1

Если макет уже построен, но документ HTML ещё не сформирован, то можно вручную создать тег <link> и добавить его в разметку HTML.
Стандарт HTML 5 разрешает тегу <link> находиться внутри тега <body>.

Узнать веб-адрес файла CSS по идентификатору ресурса можно вызовом метода \Magento\Framework\View\Asset\File::getUrl():

/**
 * @param string $asset
 * @return string
 */
function getAssetUrl($asset) {
	/** @var \Magento\Framework\ObjectManagerInterface $om */
	$om = \Magento\Framework\App\ObjectManager::getInstance();
	/** @var \Magento\Framework\View\Asset\Repository $assetRepository */
	$assetRepository = $om->get('Magento\Framework\View\Asset\Repository');
	return $assetRepository->createAsset($asset)->getUrl();
}

Например:

getAssetUrl('Dfe_Markdown::simple-mde/main.css');

Способ 2

Если решение о загрузке файла CSS надо принимать интерактивно уже в контексте работы браузера, то можно сначала узнать адрес файла CSS способом 1 и передать этот адрес в качестве параметра компоненту JavaScript.
Затем компонент JavaScript может вручную создать тег <link> и добавить его на страницу:

var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);

Этот способ не совсем прост, но он работает. Жду стандартный более простой способ: