Use articleContent.write to inject HTML into iframe and eliminate dum…

…myArticle #354
kiwix · Apr 16, 2018 · ca74012 · ca74012
1 parent 6bf87b2
commit ca74012
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 31 deletions.
diff --git a/browser-tests/nightwatch_runner.js b/browser-tests/nightwatch_runner.js
@@ -65,10 +65,10 @@ module.exports = {
             .useXpath()
             .waitForElementVisible("//div[@id='articleList']/a[text()='Ray Charles']", 20000)
             .click("//div[@id='articleList']/a[text()='Ray Charles']")
-            .useCss()
+            .useXpath()
             .frame('articleContent')
-                .waitForElementPresent('#mweQ', 2000000)
-                .assert.containsText('#mweQ', 'Life and career')
+            .waitForElementPresent("//div[@id='content']/div[@id='mw-content-text']/h2[@id='mweQ']", 2000000)
+            .assert.containsText("//div[@id='content']/div[@id='mw-content-text']/h2[@id='mweQ']", 'Life and career')
             .end();
     }
 };
diff --git a/service-worker.js b/service-worker.js
@@ -87,15 +87,12 @@ var regexpCSS = new RegExp(/\.css$/i);
 
 // Pattern for ZIM file namespace - see http://www.openzim.org/wiki/ZIM_file_format#Namespaces
 var regexpZIMUrlWithNamespace = new RegExp(/(?:^|\/)([-ABIJMUVWX])\/(.+)/);
-var regexpDummyArticle = new RegExp(/dummyArticle\.html$/);
 
 function fetchEventListener(event) {
     if (fetchCaptureEnabled) {
         console.log('ServiceWorker handling fetch event for : ' + event.request.url);
 
-        // TODO handle the dummy article more properly
-        if (regexpZIMUrlWithNamespace.test(event.request.url)
-            && !regexpDummyArticle.test(event.request.url)) {
+        if (regexpZIMUrlWithNamespace.test(event.request.url)) {
 
             console.log('Asking app.js for a content', event.request.url);
             event.respondWith(new Promise(function(resolve, reject) {

diff --git a/www/dummyArticle.html b/www/dummyArticle.html
diff --git a/www/js/app.js b/www/js/app.js
@@ -748,8 +748,6 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
             selectedArchive.resolveRedirect(dirEntry, readArticle);
         }
         else {
-            //Void the iframe
-            document.getElementById("articleContent").src = "dummyArticle.html";
             selectedArchive.readArticle(dirEntry, displayArticleInForm);
         }
     }
@@ -841,21 +839,33 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
         var urlPath = regexpPath.test(dirEntry.url) ? urlPath = dirEntry.url.match(regexpPath)[1] : "";
         var baseUrl = dirEntry.namespace + "/" + urlPath;
 
-        //Inject base tag into html
+        // Inject base tag into html
         htmlArticle = htmlArticle.replace(/(<head[^>]*>\s*)/i, '$1<base href="' + baseUrl + '" />\r\n');
 
         // Display the article inside the web page.
-        document.getElementById("articleContent").contentDocument.documentElement.innerHTML = htmlArticle;
+        var iframeArticleContent = document.getElementById("articleContent");
+        var articleContent = iframeArticleContent.contentDocument;
+        articleContent.open();
+        articleContent.write(htmlArticle);
 
         // If the ServiceWorker is not useable, we need to fallback to parse the DOM
-        // to inject math images, and replace some links with javascript calls
+        // to inject images, CSS etc, and replace links with javascript calls
         if (contentInjectionMode === 'jquery') {
-            parseAnchorsJQuery();
-            loadImagesJQuery();
-            loadCSSJQuery();
-            //JavaScript loading currently disabled
-            //loadJavaScriptJQuery();            
+            iframeArticleContent.onload = function() {
+                parseAnchorsJQuery();
+                loadImagesJQuery();
+                loadCSSJQuery();
+                //JavaScript loading currently disabled
+                //loadJavaScriptJQuery();            
+            };
         }
+        else {
+            // Removes the onload in case the user switches from jquery to serviceworker mode
+            iframeArticleContent.onload = function() {};
+        }
+
+        // Close the article content after the onload event is set, to avoid a potential race condition
+        articleContent.close();
 
         function parseAnchorsJQuery() {
             var currentProtocol = location.protocol;