📜 ⬆️ ⬇️

Simple things: Uploading HTML code via AJAX that contains JavaScript.

When developing CMS S. Builder, our team actively used AJAX . Now they decided to share their experiences. Let's start with this habratopik.

I will not touch upon various frameworks and libraries here. Its code is always more familiar. The sbAJAX library is written for working with AJAX in S.Builder . You can download and use :). This file has a function sbEvalJS . For those who do not know, I will explain. When loading via AJAX and inserting HTML-code containing JavaScript on the page, JavaScript will not be executed or bugs will be useful. This function just solves the problem.

After loading, the resulting code is passed to the function, it cuts out everything that is between the <script …> … </script> tags <script …> … </script> and, if it is not rendered in the JavaScript file, runs it through eval (), or loads the file containing JavaScript, and runs via eval () received code. It's simple. The function code is shown below:
')
  1. function sbExecScript (text)
  2. {
  3. if (! text)
  4. return ;
  5. if (window.execScript)
  6. {
  7. window.execScript (text);
  8. }
  9. else
  10. {
  11. var script = document .createElement ( 'script' );
  12. script.setAttribute ( 'type' , 'text / javascript' );
  13. script.setAttribute ( 'language' , 'JavaScript' );
  14. if (_isIE)
  15. script.text = text;
  16. else
  17. script.appendChild ( document .createTextNode (text));
  18. var head = document .getElementsByTagName ( "head" ) [0] || document .documentElement;
  19. head.insertBefore (script, head.firstChild);
  20. head.removeChild (script);
  21. }
  22. return ;
  23. }
  24. var sbEvalJSSrcs = [];
  25. function sbEvalJS (s)
  26. {
  27. var js_ScriptFragment = '(?: <script. *?>) (((\ n | \ r |.) *?) (?: <\ / script>)' ;
  28. var js_ScriptSrcFragment = '<script. + (src [] * = [] * \' (. *?) \ '| src [] * = [] * "(. *?)"). +' ;
  29. var matchAll = new RegExp (js_ScriptFragment, 'img' );
  30. var matchOne = new RegExp (js_ScriptFragment, 'im' );
  31. var matchSrc = new RegExp (js_ScriptSrcFragment, 'im' );
  32. var arr = s.match (matchAll) || [];
  33. var JSCode = [];
  34. for ( var i = 0; i <arr.length; i ++)
  35. {
  36. var srcMt = arr [i] .match (matchSrc);
  37. if (srcMt)
  38. {
  39. if (srcMt.length> 3)
  40. srcMt = srcMt [3];
  41. else
  42. srcMt = srcMt [2];
  43. if (srcMt! = '' )
  44. {
  45. var found = false ;
  46. for ( var j = 0; j <sbEvalJSSrcs.length; j ++)
  47. {
  48. if (sbEvalJSSrcs [j] == srcMt)
  49. {
  50. found = true ;
  51. break ;
  52. }
  53. }
  54. if (found)
  55. continue ;
  56. sbEvalJSSrcs [sbEvalJSSrcs.length] = srcMt;
  57. var res = sbLoadSync (srcMt);
  58. if (res)
  59. JSCode [JSCode.length] = res;
  60. }
  61. }
  62. var mtCode = arr [i] .match (matchOne);
  63. if (mtCode && mtCode [1]! = '' )
  64. JSCode [JSCode.length] = mtCode [1];
  65. }
  66. s = s.replace (matchAll, '' );
  67. for ( var i = 0; i <JSCode.length; i ++)
  68. sbExecScript (JSCode [i]);
  69. return s;
  70. }
* This source code was highlighted with Source Code Highlighter .


The function returns HTML code without JavaScript, and paste it in the right place on the page to avoid re-running scripts under IE, for example.

If you use our library, then the following functions may be useful to you:
sbLoadSync (url) - synchronously loads the contents of the specified URL and returns it.

sbLoadAsync (url, pfunction) - asynchronously loads the contents of the specified URL and passes it as a parameter to the pfunction function.

sbSendForm (form) - synchronously sends form data with a POST request and returns the result of the script specified in the action form.

sbSendFormAsync (form, pfunction) - asynchronously sends form data with a POST request and passes the result of the script specified in the action form as a parameter to the pfunction function.

I note that for all functions, sbEvalJS is called immediately upon receiving a response from the server, and the result returned by them does not contain JavaScript. If the logic needs to be changed, remove everywhere return sbEvalJS (res); .

The library was tested in IE 6, IE 7, FireFox 2, FireFox 3, Opera 9.5, Safari 3.0, Google Chrome 0.3.

Well, that's all, for the first time enough :).

Source: https://habr.com/ru/post/41910/


All Articles