Question

我使用HTML，Javascript，JQuery和CSS创建了一个简单的计算器应用程序。我希望其他人能够在他们自己的页面中嵌入计算器应用程序 - 就是说，我创建了一个名为generate.js的文件

这个文件的内容几乎是一堆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目的。任何帮助/指示表示赞赏......

Answer 1

这只是在大多数最新浏览器中为头部添加一个链接元素

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

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

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

Answer 2

尝试：

$('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("");

在嵌入式javascript代码中添加对标头的引用

2 个答案: