Closed kicktipp closed 7 years ago
Because many browsers does not allow jquery.load() to change the head tag the script should not process it and log an error message
From http://api.jquery.com/load/
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.</p> </blockquote> <p>Patch:</p> <pre><code>diff --git a/tennisapp-web-client/src/thymeleaf/thymeleaf-fragment.js b/tennisapp-web-client/src/thymeleaf/thymeleaf-fragment.js index 6baa066..969c790 100644 --- a/tennisapp-web-client/src/thymeleaf/thymeleaf-fragment.js +++ b/tennisapp-web-client/src/thymeleaf/thymeleaf-fragment.js @@ -28,16 +28,28 @@ function ThymeleafFragment() { $('[th\\:include]', element).each(function() { var fragmentSpec = $(this).attr('th:include'); var fragmentUri = resolveFragmentUri(fragmentSpec); - promises.push(createLoadPromise(promises, this, fragmentUri, false)); + if (validElement(this)) { + promises.push(createLoadPromise(promises, this, fragmentUri, false)); + } }); $('[th\\:replace]', element).each(function() { var fragmentSpec = $(this).attr('th:replace'); var fragmentUri = resolveFragmentUri(fragmentSpec); - promises.push(createLoadPromise(promises, this, fragmentUri, true)); + if (validElement(this)) { + promises.push(createLoadPromise(promises, this, fragmentUri, true)); + } }); }; - + + var validElement = function(element) { + if (element.tagName.toUpperCase() === "HEAD") { + console.log("ERROR - Rewriting head is not possible with this script") + return false; + } + return true; + } + var resolveFragmentUri = function(fragmentSpec) { var tokens = fragmentSpec.trim().split(/\s*::\s*/); var templateName = tokens[0]; </code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/markhobson"><img src="https://avatars.githubusercontent.com/u/178443?v=4" />markhobson</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>Hi @kicktipp, I'm not clear as to what use case this is addressing. Your patch prohibits including Thymeleaf fragments <strong>on</strong> a <code><head></code> element, which actually works right now, e.g.</p> <pre><code><html xmlns:th="http://www.thymeleaf.org"> <head th:include="fragments::hello"> <title>My Page</title> </head> </html></code></pre> <p>What jQuery <code>load()</code> filters out are elements such as <code><html></code>, <code><head></code> and <code><body></code> <strong>from</strong> the fragment when including. So the following fragment would be ignored:</p> <pre><code><html xmlns:th="http://www.thymeleaf.org"> <body th:fragment="hello"> <p>Hello</p> </body> </html></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/markhobson"><img src="https://avatars.githubusercontent.com/u/178443?v=4" />markhobson</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>Going to close this for now. Feel free to reopen with more info.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as ,
Because many browsers does not allow jquery.load() to change the head tag the script should not process it and log an error message
From http://api.jquery.com/load/