There is a modal window (simplified div.modal {position: absolute;}) This window can load various pages of the site, including those with js code.

There were several questions:

  1. How do I arrange for such windows document.redy
  2. How to avoid redeclare function (if they are written in tags <script> </ script>)
  3. How can I unload js, which is no longer needed (by closing the page)
  4. How do I refer to $ (document) only to the window that opened

All is desirable without eval.

As a solution, I still have one thought in turn: do everything through closures with a description of the basic prototypes for standard objects. For example, all the js code from a page is placed in a function where the document, window parameters are passed. But how to deal with loaded scripts?

(function (document, window){ //some code from modal page })(new MyDocument, new MyWindows);

Do I think in the right direction?

  • 1. Well ready it is possible to intercept at the time of end of XHR. 2. Probably it is better to check the existence of functions when declaring. 3. What does it mean to unload? Do delete machine for everything? - Bars
  • 1. Cool! I will look this way. If you help with the dock reference, it will be great! 2. I would like to abstract and not assign checks to the declaration of each function 3. “Unload” means to remove them completely from memory (with closed functions, I think it is feasible - all pointers are deleted and the garbage collector will clean everything, IMHO) - org
  • And how are you going to load in the div.modal page? Well, for example, if jQuery ('. Modal'). Load - api.jquery.com/load - then it has a "complete" interceptor that can be associated with $ (document) .ready - Bars
  • I would do that. I would write a simple pseudo-window - a simple object that would replace a real window, a pseudo-document, which would be jQuery ('. Modal'). These objects must have specific methods and attributes necessary for operation: close, location, etc ... - Bars
  • Approximately this approach I described in the question. But what about scripts that are loaded via src? there is another ambush: <button onclick = "someFunctionRun ()"> Go </ button> - the function is globally searched, and here it will be closed ( - org

1 answer 1

At the right moment (opening a modal window) I would call $ ('. Modal'). Load (), and in "complete" I would write the transfer of this code to that same pseudo-document. In order to properly run inline-scripts, you still have to resort to eval. It is necessary to iterate over all <script> elements in the arrived markup, and those that do not have the src attribute - eval'it. Only Eval should be in the pseudo-document context ( UPD : in the context of the window ). That is, do something like

 $('script:not([src])').each(function(){ if (!$(this).attr('src')) { $.globalEval(this.text || this.textContent || this.innerHTML || this.innerText || ''); } else { $(document).append(this); } });

Then the functions in the idea should belong to the main window. And with the built-in scripts with src, it's still easier: just add them to the DOM using the “live” $.append() . Recently faced the same problem, I decided the same way.

  • About the redeclare - no way. I did not find any mention of some "handlers of undefined JS methods" (there are some in PHP, for example: __call($name, $args) is a magic method that is called when an undefined method is called). So it would be possible to redirect them from window to new_window ... It only remains to calm down the fact that there is nothing bad in the redefinition of functions :) In general, since there is such a situation that it caused a problem, everything should be structured and broken into objects :) - Bars
  • The idea almost coincides with mine, but I still want to make it so that the modal page is like a separate tab window of the browser. Plus - org
  • By the way, about the situation - this is still an idea in my head) - org