Импорт группы CSS и JS файлов в HTML? - PullRequest
Новая
       0

Импорт группы CSS и JS файлов в HTML?

2 голосов
/ 19 августа 2011

У меня есть группа импорта CSS, например: 

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>

и некоторые импорты JavaScript-кода, например: 

<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>

Можно ли поместить все строки импорта CSS в файл, т.е. cssImports.css, и поместить все строки импорта JS в файл, т.е. jsImports.js. Поэтому, когда я хочу импортировать эти файлы групп CSS и JS, я напишу что-то вроде: 

<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>

чтобы все перечисленные выше файлы были импортированы?

PS: Я не хочу писать какой-либо код, относящийся к конкретному веб-серверу.

Ответы [ 7 ]

2 голосов
/ 19 августа 2011

Перейти с LazyLoad! https://github.com/rgrove/lazyload/ Это очень маленький JS (менее 1 КБ), который заботится о загрузке ресурсов для вас.

Загрузите пакет и сохраните в папке js. Тогда вы, вероятно, захотите сделать это: 

<script src="js/lazyload-min.js"></script>

Тогда для файлов javascript: 

 <script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {

      alert('all js files have been loaded');


    });
</script>

Css: 

<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {

      alert('all css files have been loaded');

    });
</script>

Это также повысит производительность вашей страницы, включив параллельную загрузку css и js (последняя только в Firefox Opera).

2 голосов
/ 19 августа 2011

Импорт Javascript: нет.Импорт CSS: да, но вы не должны , потому что это прерывает параллельную загрузку таблиц стилей.

Лучше всего использовать локальный скрипт сборки (такой как скрипт Ant, включенный в HTML5 Boilerplate ) для объединения ваших таблиц стилей и сценариев перед их загрузкой на сервер с последующими ссылками на «основные» ресурсы в вашем HTML: 

<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>

Существует учебник поиспользуя скрипт Ant .

1 голос
/ 19 августа 2011

Вы можете импортировать CSS следующим образом:

Создайте новый CSS cssImports.css и добавьте туда строки 

@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');

и связать его на своей домашней странице как: 

<link rel="stylesheet" href="/css/cssImports.css"/>

Для импорта Javascript не работает. Но вы можете создать один файл JS и включать код javascript каждого файла один за другим. Но это не рекомендуется. Лучше иметь отдельный тег <script> для каждого файла js.

1 голос
/ 19 августа 2011

для css: 

<style>
    @import url('/css/styles.css');
</style>

для js вы можете попробовать что-то вроде 

document.write("<script type='text/javascript' src='otherScript.js'></script>");

, но я не вижу причин, чтобы сделать любой из этих ...

0 голосов
/ 05 июня 2016

Теперь это возможно следующим образом с HTML Imports , которые находятся в W3C draft 

<link rel="import" href="import.html">

import.html 

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>

На данный момент только Chrome, Android и Opera поддерживают HTML Импорт изначально, но WebComponents предоставляет очень зрелый сценарий полизаполнения под названием webcomponents-lite.js для поддержки всех современных браузеров

0 голосов
/ 19 августа 2011

Я не рекомендую делать это из-за проблем с производительностью, но если вы хотите, вы можете сделать это:

Для CSS да, это возможно, в cssImports.css вы можете поместить: 

@import url(/css/reset.css);
@import url(/css/visualize.css);
@import url(/css/datatables.css);

Но для JS, я думаю, не так уж много, как CSS, но вы можете сделать это (добавив JS-файлы) из одного JS-файла (например, jsImports.js), написав код, создать элемент script и добавить этот элемент на страницу вот так: 

var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);

Сделайте это для каждой ссылки JS, которую вы хотите разместить, и у меня есть идея, что использование Arracy содержит ссылки JS, например: 

var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);

затем цикл каждый раз читает ссылку и помещает это, например: 

for (i = 0; i < jsLinks.length; i++)
{
    var jsE = document.createElement('script');
    var url = jsLinks[i];
    jsE.setAttribute('type', 'text/javascript');
    jsE.setAttribute('src', url);
    document.getElementsByTagName('head').item(0).appendChild(jsE);
}

Я не тестировал свой код, но я надеюсь, что моя идея хорошо объяснена.

Лучший

Редактировать 1: да, вы можете использовать решение Gatekeeper для JS (Very Simple), но оно использует «запись», но «для меня», мне не нравится этот способ:)

0 голосов
/ 19 августа 2011

Да, просто скопируйте весь код и поместите в новый файл в том порядке, в котором вы хотели бы его запустить.

Я знаю, что есть некоторые библиотеки javascript, которые могут сделать это для вас, но у меня нетопыт их использования.Я думаю, что Yahoo компилятор / YUI имеет один.

...