You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
After a fair amount of experimentation with #341, I've realized that some of the issues I describe in my last post there are caused by the fact that we're injecting the <base> tag into the document at the wrong time.
The problem is that we're adding the base tag after we've already injected the document into the DOM, but this is too late: any local references to stylesheets or javascript in the document start loading before the base href is seen by the browser. The base href has to be in the header at the moment we inject the document into the DOM. This may well account for the issues you, @mossroy , were noticing with stylesheets in the serviceworker mode, and it will impact on JavaScript in that mode in the future, if we get it working. Of course this doesn't matter for hyperlinks only, as they are only loaded on click.
The reason jQuery mode CSS nevertheless works with the base tag in Kiwix-JS is simply because links are loaded as raw CSS into <style> tags. But that's not how serviceworker functions. As for Kiwix-JS-Windows, I was tearing my hair out because my cached stylesheets in the file system would sometimes load but sometimes not, and I had put some workarounds in place (root-relative URLs for stylesheets) to make it work. But #341 exposed the real issue. I can only continue with #341 , if we correct this problem first.
The solution:
// Compute base URL
. . .
// Inject base tag into html
htmlArticle = htmlArticle.replace(/(<head[^>]*>\s*)/i, '$1<base href="' + baseUrl + '" />\r\n');
var iframe = document.getElementById("articleContent");
var articleContent = iframe.contentDocument || iframe.contentWindow.document;
articleContent.open();
articleContent.write(htmlArticle);
articleContent.close();
Note: It's important, when using the .write() function that the baseUrl should be written into the header before any CSS links. The browser reads each line as it's written to the document and acts on it. An alternative to the above is to use: articleContent.documentElement.innerHTML = htmlArticle;
but this method requires that we void the iframe earlier in the code. The above method voids it in the process of writing to it.
The text was updated successfully, but these errors were encountered:
EDIT: I've edited the regex above to replace the <head ...> open tag rather than the </head> close tag (required as explained in the note at the end of the previous post).
After a fair amount of experimentation with #341, I've realized that some of the issues I describe in my last post there are caused by the fact that we're injecting the
<base>
tag into the document at the wrong time.The problem is that we're adding the base tag after we've already injected the document into the DOM, but this is too late: any local references to stylesheets or javascript in the document start loading before the base href is seen by the browser. The base href has to be in the header at the moment we inject the document into the DOM. This may well account for the issues you, @mossroy , were noticing with stylesheets in the serviceworker mode, and it will impact on JavaScript in that mode in the future, if we get it working. Of course this doesn't matter for hyperlinks only, as they are only loaded on click.
The reason jQuery mode CSS nevertheless works with the base tag in Kiwix-JS is simply because links are loaded as raw CSS into
<style>
tags. But that's not how serviceworker functions. As for Kiwix-JS-Windows, I was tearing my hair out because my cached stylesheets in the file system would sometimes load but sometimes not, and I had put some workarounds in place (root-relative URLs for stylesheets) to make it work. But #341 exposed the real issue. I can only continue with #341 , if we correct this problem first.The solution:
Note: It's important, when using the .write() function that the baseUrl should be written into the header before any CSS links. The browser reads each line as it's written to the document and acts on it. An alternative to the above is to use:
articleContent.documentElement.innerHTML = htmlArticle;
but this method requires that we void the iframe earlier in the code. The above method voids it in the process of writing to it.
The text was updated successfully, but these errors were encountered: