Добавление ссылок на заголовок в встраиваемом javascript-коде

Я создал приложение простого калькулятора с использованием HTML, Javascript, JQuery и CSS. Я хотел бы, чтобы другие люди могли вставлять приложение калькулятора в свои собственные страницы, - что, как говорится, я создал файл с именем generate.jsДобавление ссылок на заголовок в встраиваемом javascript-коде

Содержимое этого файла в значительной степени является связкой document.write (), которые выплевывают HTML-код, из которого сделан калькулятор. Тем не менее, у меня есть несколько внешних источников, которые размещены на моем собственном сервере (некоторые изображения, библиотеки и т.д.) ...

document.write(""); 
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\" rel=\"stylesheet\">"); 
document.write("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->"); 
document.write("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">"); 
document.write("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">"); 
document.write("");

Это то, что я придумал, но проблема в том, что этот код добавляемый к тело, которое является плохой практикой ....

Я никогда не делал ничего подобного раньше - есть ли эффективный/чистый способ доступа к заголовкам документа и добавить эти строки к нему? Неужели я об этом совершенно неправильно?

Кроме того, я намеренно не хочу использовать iframe для целей SEO. Любая помощь/указатели оценили ...

источник

2014-11-26 mdobrenko

Таким образом, ваш калькулятор требует более 1Мб данных , включает в себя загрузку дважды и тем самым переопределяет стили начальной загрузки страницы, если она также использует bootstrap. Посмотрите, как это делают другие плагины, виджеты, библиотеки и т. Д. –

Это просто небольшой образец, над которым я работал, чтобы ознакомиться с практикой - я знаю, что это ужасно. Есть ли простой пример, который вы знаете? Спасибо за отзыв, хотя! – mdobrenko

Я только что быстро просмотрел поиск 'javascript виджета', и оказалось, что [эта страница] (http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/), которая хорошо выглядит меня. Ваш подход не является ошибочным как таковым, так как обычно вы хотите предоставить ** одну ** сжатую таблицу стилей с именами для вашего виджета, которая содержит только необходимые стили. –

Это просто добавляет элемент ссылки на голову в большинстве современных браузеров

var bootstrapCss = document.createElement('link'); 

bootstrapCss.rel = 'stylesheet'; 
bootstrapCss.href = 'http://website.com/config/bootstrap.css/'; 

document.getElementsByTagName('head')[0].appendChild(bootstrapCss);

источник

2014-11-26 02:11:06 Calummm

Try:

$('head').append('<link />'); 
$('head').append(""); 
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.css\" media=\"screen\" rel=\"stylesheet\">"); 
$('head').append("<link href=\"http:\/\/website.com\/config\/bootstrap.min.css\" rel=\"stylesheet\"><!-- web fonts -->"); 
$('head').append("<link href=\"http:\/\/website.com\/config\/font-awesome.min.css\" rel=\"stylesheet\">"); 
$('head').append("<link href=\"http:\/\/website.com\/config\/style.css\" rel=\"stylesheet\" type=\"text\/css\">"); 
$('head').append("");

источник

2014-11-26 02:11:12 Dari

Добавление ссылок на заголовок в встраиваемом javascript-коде

ответ

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