in

SharePoint Blogs

The Best Place for SharePoint-related Blogs

This Blog

Syndication

Tags

ChadClarkesMOSSBlog

Embedding JavaScript in SharePoint Pages

The best method to embed custom javascript in SharePoint pages is to create a .js file and then include it in the SharePoint Page.  If you would like to include javascript functions in the onload event of a sharepoint page, use the _spBodyOnLoadFunctionNames array. Include the push method in your script with the title of your function.  The function should not include parameters...

 <script>
function runOnLoad(){


}
_spBodyOnLoadFunctionNames.push("runOnLoad");
 </script>

Hope this helps!!!  Good luck in the World of SharePoint!

Published Aug 20 2007, 06:02 PM by ChadClarke
Filed under: , , , , , ,

Comments

 

Yan Alonzo said:

I'm new to this. Urgent Help needed. How do I embed this to a sharepoint page using form web part? or do you have any suggestions? I am new to both sharepoint '07 and javascript. thanks!

--Script Cut to save space--

August 28, 2007 2:05 AM
 

ChadClarke said:

Okay number one is SharePoint already has a html tag, body tag, and form tag in the page you are embedding this script into, so take them out!  :)  include what is in your script tag(including the <script></script>, and include what is inside the form tag(excluding the <form>).  Other than that I think you should be on your way.  GOOD LUCK!

August 29, 2007 4:33 PM
 

Mike said:

Another Question for you...

I'm trying to embed calls to javascript functions stored in a separate .js file.

I need to place the calls into the HEAD section of my document.  I should note that this is specifically for a wiki page.  It doesn't appear that I have the ability to insert HEAD elements - only body elements.  It also appears that script elements are stripped.

Any direction or info greatly appreciated.

September 25, 2007 8:39 AM
 

ChadClarke said:

Why do you need to put your calls into the HEAD section of the document?  The HEAD section of the html page is most likely in the masterpage rather than in the wikki layout page.  It would be possible to grab the HEAD section in javascript placed on the wikki page and change the innerHTML of the HEAD element if that would help...  However, I was able to get an alert to work from a .js page that I embedded into a wikki page.  If you gave some more back ground...  I may be able to find an appropriate solution.

September 26, 2007 1:09 PM
 

Nancy said:

Can you please point me to a script that opens PDF documents (Pdf, pdf, pDf, etc) in a new window?  I've tried the window.onload and _spBodyOnLoadFunctionNames.push approaches; both are successful, but give javascript errors.  I'm using a content editor web part in MOSS 2007.

Thanks for your help.

October 31, 2007 11:58 PM
 

ChadClarke said:

Interesting...  Ya, I've tried window.open so I could control the size of the window and it opened the window fine but the original window got sent to a blank screen with the word [object] on it.  Well there are many ways to solve this particular scenario.  If you would like to stick with window.open, you simply use <a href="#" onclick="window.open('url','window name');">click this</a>.  Other wise, simply use the target = "_blank".  ie. <a href="url" target="_blank">click here</a>.  You can also utilize some fancy javascripts, somewhat cumbersome but effective, to change the target on all links or just the links that satisfy certain criteria...  in one of my projects, I place a javascript on the master page of a web that checks whether it is an external site or a link to a document and I change the target to "_Blank" depending.  so loop through document.getElementsByTagName("a")  and access the href element of the node to see if it has a different host name than your sharepoint site, or if does not end in .aspx but still has an extension...  It works well for my scenario.  Let me know if you need any additional help.  And good luck in the World of Sharepoint!

November 1, 2007 8:53 AM
 

Nancy said:

Thanks for the quick response!  Here's exactly what I want:

I have CQWPs that have links with target="" attributes by default (is there a site setting to change that?) and views of document libraries that default their links with target="_ new".  I want all of those, and only those (they're PDFs) to open in a new window so the users don't keep knocking themselves off the site when they close the PDF.  Essentially, I need my script to change the target="" and target="_self" to target="_blank" (or _new) without messing with the PDFs that already have "_new" in the target attribute.

Part of my problem is that I'm not so skilled at javascript, and I'm probably making it harder than it is.

 Here's my script that works, but brings up a javascript error (sans script tags):

--Script removed to save space.

As always, I appreciate your efforts on our behalf.  Thanks for the help.

Nancy

November 1, 2007 3:45 PM
 

ChadClarke said:

Instead of trying to mess with outerHTML...  Which I believe is read only...  

You can simply modify the target element of the hyperlink node...  (ie.  such as document.getElementByTagName("a")[0].target = "_Blank"; ).

_Blank vs. _New : The difference between the two is that when you use _new it will reload the window that was first created if you click the link again, but with _blank it will always create a new window.

November 1, 2007 6:30 PM
 

Nancy said:

This is going into Sharepoint and I'm trying to stay in the OOB functionality, so I can't edit the links themselves unless I go into the master page, which I'm trying to avoid at this time.

What if I forget about the PDF part and try to just load a script that searches the document for target="" and replaces that globally with target="_blank"?  How would I write that javascript function?

November 2, 2007 12:23 AM
 

ChadClarke said:

I love that term OOB functionality.  Well, there are a couple considerations.  One your script has appear below any html you want to modify with the script.  If its not loaded into the browsers memory at the time the script executes it doesn't exist.  Thats the base rule of javascript programming.  If you are using the _spBodyOnLoadFunctionNames array you should be fine here.

Next you can easily do this with a javascript and modify the OOB links...

var hyperlinks = document.getElementsByTagName('a');

for(int j = 0; j < hyperlinks.length; j++)

{

 if(hyperlinks[j].target = "")

 {

   hyperlinks[j].target = "_blank";

 }

}

also you can add a check for a .pdf document...

var hyperlinks = document.getElementsByTagName('a');

for(int j = 0; j < hyperlinks.length; j++)

{

 if(hyperlinks[j].target = "" && hyperlinks[j].href.toLowerCase().indexOf(".pdf") != -1)

 {

   hyperlinks[j].target = "_blank";

 }

}

This script checks if the target is blank and if it is a pdf link then establish the target as _blank.  I hope this helps.

November 2, 2007 10:48 AM
 

Nancy said:

It seems so simple.  I did just what you wrote, but it didn't work.  No error, though.  :)  Then I pared it down, but it's still not working.  At this point, I think I won't mind seeing the js error in the status bar if only the user won't mind it and the docs would open in a new window.  Thanks so much for your help.  I'll keep working at it and maybe come up with a solution.  Maybe it's a bug.  Does anyone else have inexplicable js errors when placing js in a CEWP in MOSS?

--script language="JavaScript"--

_spBodyOnLoadFunctionNames.push("rewriteLinks");

function rewriteLinks()

{

//create an array of hyperlinks

var hyperlinks = document.getElementsByTagName('a');

for(int j=0; j<hyperlinks.length; j++)

{

//if the target of a link is empty, make the target _blank

if(hyperlinks[j].target = "" )

{

  hyperlinks[j].target = "_blank";

}

       }

}

--/script--

November 2, 2007 12:48 PM
 

ChadClarke said:

I was out of the office when I wrote this script...  I'll try it on Monday and debug.

November 3, 2007 8:44 PM
 

ChadClarke said:

Okay, so I debugged...  Sometimes when going from VB.NET to C# to javascript you get a little frazzled and start coding in the wrong language...  :)  So any experienced javascript programmer would have looked at the code and laughed I think... But the problem is that in the for loop there is no int in javascript.  All variables are of like var.  so, all we have to do is change int to var.  Please let me know if there are any more problems.

November 5, 2007 8:32 AM
 

Ramadan said:

hi,

i have a publishing site on moss 2007. and looks like each time i add a javascript call in a page (editing the source code of course) it is stripped out. i want to call a function on the OnClick event of a link to toggle  a DIV visibility. I know i can do that in a content editor web part... but i want to do it in a publishing page.

thanks

ramadan

February 17, 2008 2:38 AM
 

Onyeka said:

Hi, I was just wondering, I just needed a simple script that would popp up a window each time a page is loaded... any help?

March 5, 2008 8:06 AM
 

Heba said:

I am building website in sharepoint2007& I edit the page in visualstudio2008 to write the jscript but the when I save the page the change doesn't appear in site so any suggestions to help me out

March 25, 2008 5:38 AM
 

Manoj said:

I want to add JavaScript in a sharepoint wiki site. How can I achieve it?

March 27, 2008 8:35 AM
 

Eric said:

Hi, I am trying to figure out how to add the Simile Timeline simile.mit.edu/.../create-timelines.html  to my SharePoint site.  Specifically, I am trying to use the Content Editor Web Part but will little success.  Thanks

June 30, 2008 9:01 AM
 

Snake said:

Hi,

I have a problem, and would appreciate help to solve this;

I have created a custom masterpage in sharepoint 2007. This page contains a customcontrol - a new menu on the left side, instead of the quick launch.

My problem is that I have javascript that expands / collapses the menu. This works fine when i execute it with "view in browser" (in VS2005, and a test html page.).

My problem is when I want to use the function via the masterpage.

How  and where do I add a reference to the custom.js file in the masterpage?

The custom.js functions also contains "plus.gif" and "minus.gif" images (- expand / collapse).

And how  (and where) do I call the function initiate(); in the custom.js from the masterpage??

I really need help with this.

Thank you

//S

July 9, 2008 6:37 AM
 

veedles said:

Hi,

Do you have a solution for calling a js function which does have parameters?

thanks

July 16, 2008 3:55 AM

Leave a Comment

(required )  
(optional )
(required )  
Add
Need SharePoint Training? Attend a SharePoint Bootcamp!
Posts (c) their respective authors. Everything else (c) 2007 SharePoint Experts