javascript 在标题标签中插入脚本和链接标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19673398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inserting script and link tag inside the header tag
提问by Chris N.P.
Is it possible to insert/generate <Script>and <Link>tag inside the <Header>using only Javascript or DOM (not JQuery) when the page load or by just including one <Script>tag inside the <Header>and do it from there? And would still allow us to debug it and avoid duplicates if just in case we already added one similar <Script>or <Link>in the <Header>?
是否可以在页面加载时仅使用 Javascript 或 DOM（而不是 JQuery）插入/生成<Script>和<Link>标记，或者仅在其中包含一个标记并从那里执行？并且仍然允许我们调试它并避免重复，以防万一我们已经添加了一个类似的或在?<Header><Script><Header><Script><Link><Header>
For example:
例如：
Before
前
<Header>
<script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>
After
后
<Header>
<script src="Scripts/Generate.js" type="text/javascript"></script>
<script src="Scripts/Script1.js" type="text/javascript"></script>
<script src="Scripts/Script2.js" type="text/javascript"></script>
<link href="CSS/Css1.css" rel="stylesheet" type="text/css" />
<link href="CSS/Css2.css" rel="stylesheet" type="text/css" />
</Header>
Any advice or answers would help me.
任何建议或答案都会对我有所帮助。
回答by Paul Draper
HTML:
HTML：
<head>
<script src="Scripts/Generate.js"></script>
</head>
Scripts/Generate.js:
脚本/Generate.js：
if(!document.getElementById('id1')) {
var script = document.createElement('script');
script.id = 'id1';
script.src = 'Scripts/Script1.js';
document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
var link = document.createElement('link');
link.id = 'id2';
link.rel = 'stylesheet';
link.href = 'CSS/Css1.cs';
document.head.appendChild(link);
}
Afterwards, the HTML is:
之后，HTML 是：
<head>
<script src="Scripts/Generate.js"></script>
<script id="id1" src="Scripts/Script1.js"></script>
<link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
回答by habibhassani
The most easiest way is like this:
最简单的方法是这样的：
> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
回答by RobG
I'll presume that "duplicate" means having the same src attribute value. Note that this will only prevent the addition of a duplicate by the script, so it must be run after all other scripts have been added:
我假设“重复”意味着具有相同的 src 属性值。请注意，这只会防止脚本添加重复项，因此必须在添加所有其他脚本后运行它：
function conditionallyAddBySource(tagName, src) {
tagName = tagName.toLowerCase();
var elements = document.getElementsByTagName(tagName);
var propToCheck = {script:'src', link: 'href'}[tagName];
for (var i=0, iLen=elements.length; i<iLen; i++) {
// If find a "matching" element, do nothing
if (elements[i][propToCheck].indexOf(src) != -1) {
return;
}
}
// Otherwise, add an element of the required type
var element = document.createElement(tagName);
element[propToCheck] = src;
document.getElementsByTagName('head')[0].appendChild(element);
}
conditionallyAddBySource('script', 'myJSLib.js');
The new element doesn't have to be added to the head, could just be written immediately using document.writeor attached to the body (or any other element that can have child nodes other than the HTML and document element). Link elements probably should be in the head though.
新元素不必添加到头部，只需使用document.write立即写入或附加到主体（或任何其他可以具有除 HTML 和文档元素之外的子节点的元素）。链接元素可能应该在头部。
Edit
编辑
Determine whether to check src or href depending on whether tagName is scriptor link.
根据 tagName 是script还是link来确定是否检查 src 或 href 。
Using Paul's suggestion of querySelector, you can use:
使用 Paul 的 querySelector 建议，您可以使用：
function conditionallyAddBySource(tagName, src) {
tagName = tagName.toLowerCase();
var propToCheck = {script:'src', link: 'href'}[tagName];
var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');
if (!element) {
element = document.createElement(tagName);
element[propToCheck] = src;
document.getElementsByTagName('head')[0].appendChild(element);
}
}
provided querySelector support is avilable (IE 8 in standards modeand higher, dunno about others).
提供的 querySelector 支持是可用的（标准模式下的IE 8及更高版本，不知道其他的）。
