IE 7 & 8 javascript file undesirably caching with require.js

I have a page javascript page.js being loaded with require.js. The call to the page.js is placed on the bottom of the page after the calls to require.js and is as follows:

<script>
    require(["page"]);
</script>

Functions inside the page.js simply do not execute each time the page is accessed.

To be clear, an alert('hello'); in the middle of page.js will be al开发者_运维技巧erted most but not all of the times. I'm pretty sure this is not an existing IE issue, and that a simple alert will always execute provided there are no other JS errors.

95% of the time the page and it's corresponding functions execute, about 5% of the time the IE browsers are not reexecuting the contents of the page.js.

I don't think this is an inherent IE issue, but rather require.js is stumbling over related aggressive caching issues found in IE.

Edits: Just to clarify, the page.js file is visible in the f12 dom load when the error occurs. The page is properly cached. The issue is that the cached code file is not re run!

For instance the alert in this file is not executed!

I'm not sure about the internals of require.js but I suppose they do xhr for the resources and eval it. It seems the xhr completes and loads into the dom, but the eval isn't working correctly. (This is of course speculation, as I don't know enough require.js internals).

---

The only way i know to prevent caching your js files is to add a random string to the end : example :

<script src="http://www.mydomaine.com/myjsfile.js?t=123456"></script>

generate the "t" parameter content randomly using an md5 hash or wathever, this makes browsers believe that it's a different file each time.

---

There problem may not be due to caching. Caching is basically controlled on the server-side, so if you do not want a file cached, you have the server setting the cache-control headers to do that. Caching does not affect if a javascript file is "executed" or not, it only affects where the browser gets data from when trying resolve a given resource. Normally, you want .js files to be cached for performance reasons.

In your case, caching may not be the real problem. When using dynamic javascript source loaders (libraries like dojo support this), it may best that the file you load is wrapped in the following:

(function(){

// Main code here...

})();

This defines an anonymous function, and then executes it right away. This gives the following advantages:

• Creates a closure so you can declare variables that are only visible in the scope of your file.

• Ensure that any direct executable statements are executed.

Note, I'm not familar with require.js, so there is a possibility it can play a role in your problem. Also, you did not provide the file you are loading via require, which it may have a bug that is causing the inconsistency you are encountering.

---

Conclusion: IE (where it was mostly occurring) was kind of swallowing up the error, when we were able to reproduce it in Chrome, we found an error indicating that one of our global funcs wasn't yet loaded because the global funcs file wasn't added to the require list. Unfortunately, we're not using require.js's compile + optimization which may or may not have barfed without an IMPLICIT listing of the globals.js as a dependency.

I guess the take home is make sure any functions called are themselves defined in a dependency implicitly listed in the require block!