DotNetNuke Powered!
          
John Mitchell's (mostly DotNetNuke) Blog - Add a Javascript link to the Head section from your skin
 Tuesday, May 23, 2006

Ever wanted to include some cool Javascript with your skin?

Here is a way to make it show up properly in the Head section of the page. 

Just paste this code directly into your skin.

<script runat="server">
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'add a script reference for Javascript to the head section
Dim oLink As New HtmlGenericControl("script")
oLink.Attributes("language") = "javascript"
oLink.Attributes("type") = "text/javascript"
oLink.Attributes("src") = SkinPath & "MyJavascript.js"
Dim oCSS As Control = Me.Page.FindControl("CSS")
If Not oCSS is Nothing Then
oCSS.Controls.AddAt(0, oLink)
End if

End Sub
</script>

Updated 12/27/2006:

I have had a few requests from people to know how to include more than one file.  To do that you just need to change the link object for each file, then add it to the Controls collection of the css placeholder like this:

<script runat="server">
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
Dim oCSS As Control = Me.Page.FindControl("CSS")
 If Not oCSS is Nothing Then

   'add a script reference for Javascript to the head section
   Dim oLink As New HtmlGenericControl("script")
   oLink.Attributes("language") = "javascript"
   oLink.Attributes("type") = "text/javascript"
   oLink.Attributes("src") = SkinPath & "MyJavascript.js"
   oCSS.Controls.AddAt(0, oLink)

   'add another link reference
   oLink.Attributes("src") = SkinPath & "YourJavascript.js"
   oCSS.Controls.AddAt(0, oLink)

   'and to add a different kind of link, like to a CSS file you should clear the old attributes of the link object by creating a new one

  oLink = New HtmlGenericControl("link")
  oLink.Attributes("rel") = "stylesheet"
  oLink.Attributes("type") = "text/css"
  oLink.Attributes("href") = SkinPath & "MyStyleSheet.css"
  oCSS.Controls.AddAt(0, oLink)

  End if

End Sub
</script>


5/23/2006 1:19:14 PM (Central Daylight Time, UTC-05:00)  #    Comments [11]
7/7/2006 12:11:52 PM (Central Daylight Time, UTC-05:00)
Dear John

Fine code...
But what do you have to do when this javascript neaded a onload in the body tag?...

Vriendelijke groeten
Gilbert Vanden Borre
7/20/2006 2:37:08 PM (Central Daylight Time, UTC-05:00)
Gilbert,

Don't have a real answer here but you should be using the window.load event instead of the body tag anyway.

Sorry, that probably just pissed you off more then anything.
12/13/2006 11:20:20 AM (Central Standard Time, UTC-06:00)
Hi
When you say 'paste this code into your skin', what file would that be?
12/27/2006 11:36:26 PM (Central Standard Time, UTC-06:00)
Hi John... FANTASTIC CODE.
It seems to work when i place the code in the ASCX file just before the HTML after the skin package has already generated the ASCX... i just download the ASCX file paste the code before the html and it works...

However...

Slight problem though when tasked with multiple JavaScript .js files i need to load.

For example what how would i accomplish loading of 3 different .js files
such as

myJavaScript01.js
mySpecialJavaScript02.js
myuniqueJavaScript03.js
and so on.
In my situation i have script that must be loaded in seperate .js files.
How would one alter your FANTASTIC code to accomplish this.

Please RSVP as soon as you have a thought.
Thanks
1/25/2007 5:12:23 PM (Central Standard Time, UTC-06:00)
The proposed solution for multiple js files doesn't seem to work... Ideas?
1/25/2007 5:15:22 PM (Central Standard Time, UTC-06:00)
I should note that it does work fine if a new object is created rather than reusing the first and updating the source attribute... so, I'm OK. Nice suggestion.
1/25/2007 5:21:09 PM (Central Standard Time, UTC-06:00)
Hmm, I guess I should have tested that!
1/25/2007 8:24:37 PM (Central Standard Time, UTC-06:00)
So this then?

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
Dim oCSS As Control = Me.Page.FindControl("CSS")
If Not oCSS is Nothing Then

'add a script reference for Javascript to the head section
Dim oLink As New HtmlGenericControl("script")
oLink.Attributes("language") = "javascript"
oLink.Attributes("type") = "text/javascript"
oLink.Attributes("src") = SkinPath & "MyJavascript.js"
oCSS.Controls.AddAt(0, oLink)

'add another link reference
oLink = New HtmlGenericControl("script")
oLink.Attributes("src") = SkinPath & "YourJavascript.js"
oCSS.Controls.AddAt(0, oLink)

'and to add a different kind of link, like to a CSS file you should clear the old attributes of the link object by creating a new one

oLink = New HtmlGenericControl("link")
oLink.Attributes("rel") = "stylesheet"
oLink.Attributes("type") = "text/css"
oLink.Attributes("href") = SkinPath & "MyStyleSheet.css"
oCSS.Controls.AddAt(0, oLink)

End if

End Sub
12/7/2007 11:29:20 AM (Central Standard Time, UTC-06:00)
This is fine if you're using webcontrols. How about HTML files with tokens that will be parsed? The HTML files are probably more portable.
12/17/2007 9:11:31 PM (Central Standard Time, UTC-06:00)
You can also put this same code into an HTML skin. It will ge transferred over when it is parsed.
John Mitchell
5/5/2008 8:47:53 AM (Central Daylight Time, UTC-05:00)
Can you please tell me, How I add conditional css file based upon the browser version?
Vinay Khandelwal
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):