Loading External JS file - 5 mins After Page loaded

[Ang3l0fDeath]

Im looking for an example script.  I dont need exactly 5 minutes at all, in fact its link to a button.

 

The Example script im looking for will be on a simple loading a javascript file onto the current page where the function are use-able after the file has loaded.  I've read 3 different ways, but each sounds like it has own issues.  I've also read and thought of using a 4th way on my site.

 

way 1 - AJAX load a page with both the javascript and html content on the page.

way 2 - AJAX load just the javascript file into a DIV container

way 3 - AJAX load a javascript file and document.create ('script') element and place the file within side the script element.

way 4 - iframe/frame to a page that has javascript and html content present, however the javascript within the frame will either work with inside its own frame/page or set it to make changes on the parent page.

way 5 - simply just add all the javascript files to my main page.

 

I know some people only done this 1 way, and i was wondering which are the worst approach and which might be the most flexible / reliable. So far i think im going to try way # 4.  However when the site is complete i think way # 5 will do fine, thats how a AJAX site is suppose to be.  And if anyone curious about the layout of my site.

 

files listed below

www.domain.com/index.php - only page anyone will ever look at.

www.domain.com/.htaccess - deny access to all dictionarys & files except www.domain.com/

www.domain.com/p=.php - this is the file my AJAX request will be made to, this file will do my GET / POST request and process of all information.  This p=.php file will fetch all information from my sub-dictionarys which could be 1 file or hundreds of files.

[prestonwinfrey]

If I understand what you're trying to do, I believe I know how you can solve your problem.

 

Using the JavaScript framework jQuery, you can use the getScript() event (http://api.jquery.com/jQuery.getScript/) to dynamically load JavaScript after the page has loaded. Inside of the dynamically-loaded JS file, you can bind events using jQuery's live() function (http://api.jquery.com/live/). This allows you to apply events to elements in the DOM that were previously loaded or later added.

 

Let me know if you need any further assistance.

[Ang3l0fDeath]

#5 was the winner.  Simple and easy.

 

Got loading of external files done.  However i ran into a Browser cache problem, external files data wasnt up to date and i really got tired of my own alert('test message') showing up even though i deleted it from the external file.  I could give #4 a try.  But in the long run it would be saving bandwidth with #3 or #5 with also a more secure site.

[Ang3l0fDeath]

For those who want to do the loading of External files

 

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

 

function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file