├── .gitattributes
├── .gitignore
├── DEMO
    ├── !screenshot.png
    ├── blue.css
    ├── folder
    │   ├── footer2.html
    │   └── subfolder
    │   │   └── footer3.html
    ├── footer.html
    ├── green.css
    ├── header.html
    ├── index.html
    ├── js
    │   ├── 1.js
    │   └── result.js
    ├── log.txt
    ├── mainmenu.html
    └── red.css
├── LICENSE
├── README.md
└── includeHTML.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Windows image file caches
 2 | Thumbs.db
 3 | ehthumbs.db
 4 | 
 5 | # Folder config file
 6 | Desktop.ini
 7 | 
 8 | # Recycle Bin used on file shares
 9 | $RECYCLE.BIN/
10 | 
11 | # Windows Installer files
12 | *.cab
13 | *.msi
14 | *.msm
15 | *.msp
16 | 
17 | # Windows shortcuts
18 | *.lnk
19 | 
20 | # =========================
21 | # Operating System Files
22 | # =========================
23 | 
24 | # OSX
25 | # =========================
26 | 
27 | .DS_Store
28 | .AppleDouble
29 | .LSOverride
30 | 
31 | # Thumbnails
32 | ._*
33 | 
34 | # Files that might appear in the root of a volume
35 | .DocumentRevisions-V100
36 | .fseventsd
37 | .Spotlight-V100
38 | .TemporaryItems
39 | .Trashes
40 | .VolumeIcon.icns
41 | 
42 | # Directories potentially created on remote AFP share
43 | .AppleDB
44 | .AppleDesktop
45 | Network Trash Folder
46 | Temporary Items
47 | .apdisk
48 | 


--------------------------------------------------------------------------------
/DEMO/!screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xmoonlight/includeHTML/7079845a873ac44fc38f45b5e97758e69fbb5819/DEMO/!screenshot.png


--------------------------------------------------------------------------------
/DEMO/blue.css:
--------------------------------------------------------------------------------
1 | body{
2 |  background-color:#8888CC;
3 | }


--------------------------------------------------------------------------------
/DEMO/folder/footer2.html:
--------------------------------------------------------------------------------
1 | <hr/>
2 | <h1>Я файл: footer2.html</h1>
3 | <div data-src="folder/subfolder/footer3.html"></div>


--------------------------------------------------------------------------------
/DEMO/folder/subfolder/footer3.html:
--------------------------------------------------------------------------------
1 | <hr/>
2 | <h1>Я файл: footer3.html и загружаю файл "js/result.js"</h1>
3 | <div data-src="js/result.js"></div><hr>
4 | 


--------------------------------------------------------------------------------
/DEMO/footer.html:
--------------------------------------------------------------------------------
1 | <hr/>
2 | <h1>Я файл: footer.html</h1>
3 | 


--------------------------------------------------------------------------------
/DEMO/green.css:
--------------------------------------------------------------------------------
1 | body{
2 |  background-color:#008800;
3 | }


--------------------------------------------------------------------------------
/DEMO/header.html:
--------------------------------------------------------------------------------
1 | <h1>Я файл: header.html</h1>
2 | <a href="javascript:alert(document.location)">document.location</a><br>
3 | Здесь будет реестр всех загрузок (data-src="result"), который будет добавлен в самом конце файлом "js/result.js":<br>
4 | <div data-src="result" style="border:1px solid #FFF;padding:5px"></div>
5 | 


--------------------------------------------------------------------------------
/DEMO/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="ru">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>inlcudeHTML demo</title>
 7 |     <style>
 8 |       h1{font-size:24px;}
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <div data-src="header.html"></div><hr>
13 |     <div id="mainmenu">(здесь должно быть меню...)<br>
14 |        <a href="javascript:includeHTML('mainmenu.html', window.document.getElementById('mainmenu'),alert('Загружено!'))">грузим?</a>
15 |     </div><hr/>
16 |     <div><h1>Я файл: index.html</h1></div><hr/>
17 | 
18 |     Это лог-файл "log.txt":
19 |     <div data-src="log"></div>
20 |     <hr>
21 | 
22 |     <div data-src="js/1.js">Загружаем "js/1.js" .... </div>
23 |     <br>
24 |     <div data-src="blue.css">Загружаем "blue.css".</div>
25 |     <br>
26 |     Теперь мы будем менять стиль в один клик!<br>
27 |     <b>Переключить на:</b><br>
28 |     <a href="javascript:includeHTML('green.css',0,alert('green.css - загружен!'))">зелёный</a><br>
29 |     <a href="javascript:includeHTML('red.css',0,alert('red.css - загружен!'))">красный</a><br>
30 |     <a href="javascript:includeHTML('blue.css',0,alert('blue.css - загружен!'))">синий (по-умолчанию)</a><br>
31 | 
32 |     <div data-src="footer.html"></div>
33 |     <div data-src="folder/footer2.html"></div>
34 | 
35 | 
36 |     <script src="../includeHTML.js"></script>
37 |     <script>
38 |         includeHTML('log.txt', 'log');
39 |     </script>
40 | 
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/DEMO/js/1.js:
--------------------------------------------------------------------------------
1 | var msg='Я строка из файла: 1.js';
2 | alert(msg);
3 | console.log(msg);
4 | console.log('Реестр мест загрузок:',includeHTML('places'));
5 | 
6 | 


--------------------------------------------------------------------------------
/DEMO/js/result.js:
--------------------------------------------------------------------------------
 1 | var outPlace=includeHTML('places')['result'];
 2 | 
 3 |   for (var key in includeHTML('places')) {
 4 |      outPlace.innerHTML+=key+': '+includeHTML('places')[key].tagName+'<br>';
 5 |   }
 6 | 
 7 | console.log('Я result.js! Я собрал и вывел весь список загрузок.');
 8 | 
 9 | 
10 | includeHTML('places')['js/1.js'].innerHTML+=' добавим сюда, что мы грузили файл "js/1.js" в самом начале (добавлено из файла "js/result.js").';
11 | 


--------------------------------------------------------------------------------
/DEMO/log.txt:
--------------------------------------------------------------------------------
1 | Я содержимое лог-файла log.txt
2 | 


--------------------------------------------------------------------------------
/DEMO/mainmenu.html:
--------------------------------------------------------------------------------
1 | <h1>Я файл: mainmenu.html</h1>
2 | 


--------------------------------------------------------------------------------
/DEMO/red.css:
--------------------------------------------------------------------------------
1 | body{
2 |  background-color:#880000;
3 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | License: CC BY-SA 4.0
2 | Addition requirements: keep and copy license file into every software copy, keep and copy all license headers in files and license file without any changes.
3 | Copyright (C) xmoonlight, 2016, All Rights Reserved
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # includeHTML
 2 | includeHTML - Loading HTML parts via HTML tag (pure js)
 3 | 
 4 | Supported protocols: http://, https://, file:///
 5 | 
 6 | Supported browsers: IE 9+, FF, Chrome (and may be other)
 7 | 
 8 | USAGE:
 9 | -----
10 | 1.Insert <b>includeHTML</b> into head section (or before body close tag) in HTML file: 
11 | ```html
12 | <script src="js/includeHTML.js"></script>
13 | ```
14 | 2.Anywhere use <b>includeHTML</b> as HTML tag:
15 | ```html
16 | <div data-src="header.html"></div>
17 | ```
18 | 
19 | ALL USAGE (examples):
20 | -------
21 |   1.Tag:
22 |   ```html
23 |     <div data-src="menu.html"></div>
24 |     <div data-include="menu.html"></div>
25 |     <include src="menu.html"></include> <!-- old tag from v1.0 -->
26 |     <div data-src="js/1.js"></div>
27 |     <div data-src="log"></div>
28 |   ```
29 | 
30 |   2.Async:
31 | ```javascript
32 |     <script>
33 |        includeHTML('header.html', document.getElementById('header'));
34 |        includeHTML('menu.html', document.getElementById('mainMenu'));
35 |        includeHTML('green.css');
36 |        includeHTML('js/1.js');
37 |        includeHTML('log.txt','log');
38 |     </script>
39 | ```
40 | 
41 |   3.Sync:
42 | ```javascript
43 |     <script>
44 |       includeHTML('header.html', document.getElementById('header'), function(){
45 |         includeHTML('menu.html', document.getElementById('mainMenu'));
46 |       });
47 |     </script>
48 | ```
49 | 


--------------------------------------------------------------------------------
/includeHTML.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | License: CC BY-SA 4.0
  3 | Addition requirements: keep and copy license file into every software copy, keep and copy all license headers in files and license file without any changes.
  4 | Copyright (C) xmoonlight, 2016, All Rights Reserved
  5 | https://github.com/xmoonlight/includeHTML
  6 | 
  7 | Product: includeHTML
  8 | Language: javascript
  9 | Version: 2.0
 10 | */
 11 | (function(){
 12 |  var includeHTMLplaces=[];
 13 |  var prevCSS;
 14 | 
 15 |  function load(dst, url, callback) {
 16 |     var xmlhttp;
 17 |     if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
 18 |     else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 19 |     xmlhttp.onreadystatechange = function() 
 20 |     {
 21 |         if (xmlhttp.readyState == XMLHttpRequest.DONE ) 
 22 |         {
 23 |            if(xmlhttp.status == 200){
 24 |               dst.innerHTML = xmlhttp.responseText;
 25 |               statusText = "success";
 26 |            }
 27 |            else {
 28 |               statusText = "error";
 29 |            }
 30 |                callback(xmlhttp.responseText, statusText, xmlhttp);
 31 |         }
 32 |     }
 33 | 
 34 |      try {      
 35 |       xmlhttp.open("GET", url, true);
 36 |       xmlhttp.send();
 37 |      } catch(e) {callback(true, 'error', false);}
 38 | 
 39 |  }
 40 | 
 41 | function loadRes(src, destination, callback) {
 42 |    var obj;
 43 |    var type;
 44 |    if (src.match(/\.htm*/i)) { // htm/html
 45 |     type='html';
 46 |    } else if (src.match(/\.js*/i)) { //javascript
 47 |     obj = document.createElement("script");
 48 |     obj.type = "text/javascript";
 49 |     obj.src = src;
 50 |     type='js';
 51 |   } else if (src.match(/\.css*/i)) { //css stylesheet
 52 |     obj = document.createElement("link");
 53 |     obj.rel = "stylesheet";
 54 |     obj.type = "text/css";
 55 |     obj.href = src;
 56 |     type='css';
 57 |  } else if (src.match(/\.txt*/i)) { //txt
 58 |     type='txt';
 59 |  } else { //place
 60 |     type='place';
 61 |  }
 62 | 
 63 |   if(obj) {
 64 |     if (obj.readyState){  //IE
 65 |         obj.onreadystatechange = function(){
 66 |             if (obj.readyState == "loaded" ||
 67 |                     obj.readyState == "complete"){
 68 |                 obj.onreadystatechange = null;
 69 |     	        if (type==='js') obj.parentNode.removeChild(obj);
 70 |     	        else if (type==='css') {
 71 |                     if (prevCSS) obj.parentNode.removeChild(prevCSS);
 72 |                     prevCSS=obj; 
 73 |                 }
 74 |                 includeHTMLplaces[src]=destination;
 75 |                 if (callback) callback();
 76 |             }
 77 |         };
 78 |     } else {  //Others
 79 |         obj.onload = function(){
 80 | 		     if (type==='js') this.parentNode.removeChild(this);
 81 |                      else if (type==='css') {
 82 |                          if (prevCSS) this.parentNode.removeChild(prevCSS);
 83 |                          prevCSS=this;
 84 |                      }
 85 |                      includeHTMLplaces[src]=destination;
 86 | 		     if (callback) callback();
 87 |         };
 88 |     }
 89 |    	  document.getElementsByTagName("head")[0].appendChild(obj);
 90 |   }
 91 | }
 92 | 
 93 | window.includeHTML = function (src, destination, callback) {
 94 |   if(!destination) destination=0;
 95 |   if (src==='places') return includeHTMLplaces;
 96 |   else if (typeof(destination)=='string') {
 97 |      destination=document.body.querySelectorAll('include[src="'+destination+'"],div[data-src="'+destination+'"],div[data-include="'+destination+'"]')[0];
 98 | 
 99 |      if(destination.hasAttribute("src")) destination.setAttribute('src',src);
100 |      if(destination.hasAttribute("data-src")) destination.setAttribute('data-src',src);
101 |      if(destination.hasAttribute("data-include")) destination.setAttribute('data-include',src);
102 | 
103 |      includeHTMLplaces[src]=destination;
104 |   } else {
105 |      includeHTMLplaces[src]=destination;
106 |   }
107 | 
108 |   if (src.match(/\.htm|\.txt*/i))
109 |     load(destination,src,function ( response, status, xhr ) { //load HTML-markup
110 |   if (status==="error") {
111 |        var iframe = document.createElement('iframe');
112 |        iframe.onload = function() {
113 |            if(!response && document.location.protocol.indexOf('http')==-1) { //всё, приехали...
114 |                  if (navigator.userAgent.match(/Chrome/i)!==-1) //выводим подсказку.
115 |                        msg='For Chrome: add parameter in shortcut link:'+"\n"+'"path_chrome_dir\chrome.exe" --allow-file-access-from-files';
116 |                  alert(navigator.userAgent+"\nResponse: "+response+"\nURL: "+src+"\n-------\n"+msg);
117 |            }
118 |            destination.innerHTML = window[this.name].document.body.innerHTML;
119 |            iframe.parentNode.removeChild( iframe );
120 |            includeHTMLplaces[src]=destination;
121 |            includeHTMLAuto(destination);
122 |            if (callback) callback();
123 |        }
124 | 
125 |        iframe.style.display = 'none';
126 |        iframe.name = 'includer'+src+Math.random();
127 |        iframe.src = src;
128 |        document.body.appendChild(iframe);
129 |     } else {
130 |             includeHTMLplaces[src]=destination;
131 |             includeHTMLAuto(destination);
132 |             if(callback) callback();
133 |     }
134 |   });
135 |   else  { 
136 |         loadRes(src, destination, callback);
137 |   }
138 | 
139 |  }
140 | 
141 | 
142 |   function includeHTMLAuto(node) {
143 |       var includes;
144 |         includes=node.querySelectorAll('include,div[data-src],div[data-include]');
145 |         for (var i=0; i<includes.length;i++) {
146 |           if(includes[i].getAttribute("src")) includeHTML(includes[i].getAttribute("src"), includes[i]);
147 |           else if (includes[i].getAttribute("data-src")) includeHTML(includes[i].getAttribute("data-src"), includes[i]);
148 |           else if (includes[i].getAttribute("data-include")) includeHTML(includes[i].getAttribute("data-include"), includes[i]);
149 |         }
150 |   }
151 | 
152 |   var old_onload=window.onload;
153 |   window.onload=function(){
154 |      old_onload&&old_onload();
155 |      includeHTMLAuto(document.body);
156 |   }
157 | 
158 | })();
159 | 
160 | /*
161 | USAGE:
162 | 
163 |   1.Tag: <div data-src="menu.html"></div>
164 |          <div data-include="menu.html"></div>
165 |          <div><include scr="menu.html"></include></div>
166 |          <div data-src="log"></div>
167 | 
168 |   2.Async:
169 |       <script>
170 |         includeHTML('header.html', document.getElementById('header'));
171 |         includeHTML('menu.html', document.getElementById('mainMenu'));
172 |         includeHTML('green.css');
173 |         includeHTML('js/1.js');
174 |         includeHTML('log.txt', 'log');
175 |       </script>
176 | 
177 |   3.Sync:
178 |       includeHTML('header.html', document.getElementById('header'), function(){
179 |         includeHTML('menu.html', document.getElementById('mainMenu'));
180 |       });
181 | */


--------------------------------------------------------------------------------