Introduce
Hello everyone, today I will introduce to you another problem I have encountered in the project. That is processing include data from HTML files into web content in JavaScript. Let’s analyze the requirements offline.
Request
Customers have built many modules (each module is similar to a customer service website) and these modules are running simultaneously, but the header / footer is the same for all modules. Therefore, this header / footer part wants to split into 2 separate files for easy editing later. All modules are updated.) To ensure CSS / JS of header / footer, KH chose to write internal CSS / JS.
Perform
With the above requirements, I will handle as follows:
- Write HTML code, position markup to include header and footer
- Write the JS code to get data from the HTML file of the header / footer specified for insertion and the highlighted location Let’s see the code I have made
HTML
I marked the header / footer position as the code below, and passed the class as include-html and attribute data-file as the path of the HTML file that I need to include.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> ... <title>My website</title> ... </head> <body> <div class="header-section include-html" data-file="myfolder/header.html"></div> <div class="main-content"> ... // content here ... </div> <div class="footer-section include-html" data-file="myfolder/footer.html"></div> </body> </html> |
Javascript
I will add internal javascript in the above HTML file and have comments inside the code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">function</span> <span class="token function">includeHTML</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> i <span class="token punctuation">,</span> elem <span class="token punctuation">,</span> file <span class="token punctuation">,</span> xhttp <span class="token punctuation">;</span> <span class="token comment">// Khởi tạo các biến</span> <span class="token comment">// Lấy tất cả các thẻ có class là include-html (Như ở trên mình định nghĩa 2 thẻ để include header/footer)</span> <span class="token keyword">var</span> includeFiles <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">getElementsByClassName</span> <span class="token punctuation">(</span> <span class="token string">'include-html'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Duyệt vòng lặp từ mảng phần tử ở trên</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><</span> container <span class="token punctuation">.</span> length <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> elem <span class="token operator">=</span> includeFiles <span class="token punctuation">[</span> i <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token comment">// Gán biến elem bằng thẻ đang được duyệt</span> file <span class="token operator">=</span> elem <span class="token punctuation">.</span> <span class="token function">getAttribute</span> <span class="token punctuation">(</span> <span class="token string">"data-file"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Gán biến file là attribute của thẻ đang được duyệt</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> file <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Kiểm tra nếu tồn tại attribute này thì thực hiện tiếp</span> xhttp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Khởi tạo request</span> xhttp <span class="token punctuation">.</span> <span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Lắng nghe event khi request kết thúc</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Nếu status là 200 (thành công) thì set nội dung của file vào thẻ đang được duyệt</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> status <span class="token operator">==</span> <span class="token number">200</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> elem <span class="token punctuation">.</span> innerHTML <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> responseText <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Nếu status 404 (lỗi) thì hiển thị nội dung lỗi không thấy component</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> status <span class="token operator">==</span> <span class="token number">404</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> elem <span class="token punctuation">.</span> innerHTML <span class="token operator">=</span> <span class="token string">"Component not found."</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Sau khi duyệt xong thẻ này thì xoá class include-html </span> elem <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token string">"include-html"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Gọi lại function includeHTML để duyệt tất cả các thẻ có class include-html còn lại</span> <span class="token function">includeHTML</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Tạo và gửi request</span> xhttp <span class="token punctuation">.</span> <span class="token function">open</span> <span class="token punctuation">(</span> <span class="token string">"GET"</span> <span class="token punctuation">,</span> file <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> xhttp <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">;</span> <span class="token comment">// Thoát function</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token function">includeHTML</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
Conclude
Above is the problem I met and how to handle it, thank you for following this article. Hope it is a case study for your reference 
.