Geek Answers Handbook

Insert script and link tag inside title tag

Is it possible to insert / generate the <Script> and <Link> tags inside the <Header> using only Javascript or DOM (not JQuery) when loading the page or just including the <Script> inside the <Header> and do it from there? And still let us debug it and avoid duplicates, in case we have already added one of <Script> or <Link> to <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 tips or answers will help me.

+7
javascript dom
source share
2 answers

HTML:

 <head> <script src="Scripts/Generate.js"></script> </head>

Scripts / 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); }

Subsequently 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>
+15
source share

I assume that "duplicate" means having the same src attribute value. Note that this will prevent the duplicate from being added using the script, so it should run after all other scripts have been added:

 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');

A new element does not need to be added to the head, it can be immediately written using document.write or attached to the body (or any other element that may have child nodes other than HTML and the document element). Probably link elements should be in the head.

Edit

Decide whether to check src or href depending on whether tagName is a script or a link.

Using the Paul querySelector clause, you can use:

 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 that querySelector support is avilable (IE 8 in standard mode and above, dunno about others).

+1
source share

More articles:


All Articles