fixes alexadam#52

Author: bunglegrind

web-extension/extractHtml.js

@@ -18,7 +18,7 @@ var allowedTags = [
     'math', 'maction', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot',
     'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'msgroup', 'mlongdiv', 'mscarries',
     'mscarry', 'mstack', 'semantics'
-    // TODO ? 
+    // TODO ?
     // ,'form', 'button'
 
     // TODO svg support ?
@@ -38,12 +38,12 @@ var tmpIdsToNewCssSTRING = {};
 var supportedCss = [
     'background-color',
     'border',
-    'color', 
+    'color',
     'font',
     'line-height',
     'list-style',
     'padding',
-    'text-align', 
+    'text-align',
 ];
 //////
 
@@ -73,7 +73,7 @@ function getImageSrc(srcTxt) {
             filename: newImgFileName, // TODO name
             data: getBase64ImgData(srcTxt)
         });
-    } else {        
+    } else {
         allImages.push({
             originalUrl: getImgDownloadUrl(srcTxt),
             filename: newImgFileName,  // TODO name
@@ -118,28 +118,31 @@ function extractSvgToImg($htmlObject) {
 
 // replaces all iframes by divs with the same innerHTML content
 function extractIFrames() {
-    let allIframes = document.getElementsByTagName('iframe')
-    let changeIFrames = []
-    let newDivs = []
-    for (let iFrame of allIframes) {
-        if (!iFrame.contentDocument || !iFrame.contentDocument.body) {
-            continue
-        }
-        let bodyContent = iFrame.contentDocument.body.innerHTML        
-        let bbox = iFrame.getBoundingClientRect()
-        let newDiv = document.createElement('div')
-        newDiv.style.width = bbox.width
-        newDiv.style.height = bbox.height
-        newDiv.innerHTML = bodyContent
-        changeIFrames.push(iFrame)
-        newDivs.push(newDiv)
-    }
-    for (let i = 0; i < newDivs.length; i++) {
-        let newDiv = newDivs[i]
-        let iFrame = changeIFrames[i]
-        let iframeParent = iFrame.parentNode
-        iframeParent.replaceChild(newDiv, iFrame)
+    function editStyle(style, id) {
+        return style.split("\n").map(function (line) {
+            if(!/\{/.test(line)) {
+                return line;
+            }
+            return "#" + id + " " + line.replace("body", "");
+        }).join("\n");
     }
+    let iframes = Array.from(document.querySelectorAll("iframe"));
+    const divs = iframes.map(function (iframe, index) {
+        const div = document.createElement("div");
+        div.id = "save-as-ebook-iframe-" + index;
+        if (!iframe.contentDocument || !iframe.contentDocument.body) {
+            return div;
+        }
+        let bbox = iframe.getBoundingClientRect();
+        div.style.width = bbox.width;
+        div.style.height = bbox.height;
+        div.innerHTML = iframe.contentDocument.body.innerHTML ?? "";
+        Array.from(div.querySelectorAll("style")).forEach(function (style) {
+            style.innerHTML = editStyle(style.innerHTML, div.id);
+        });
+        return div;
+    });
+    iframes.forEach((iframe, i) => iframe.parentNode.replaceChild(divs[i], iframe));
 }
 
 function preProcess($htmlObject) {
@@ -381,7 +384,7 @@ function extractCss(includeStyle, appliedStyles) {
 
 function deferredAddZip(url, filename) {
     let deferred = $.Deferred();
-    JSZipUtils.getBinaryContent(url, function(err, data) {        
+    JSZipUtils.getBinaryContent(url, function(err, data) {
         if (err) {
             // deferred.reject(err); TODO
             console.log('Error:', err);
@@ -408,13 +411,13 @@ function deferredAddZip(url, filename) {
                 }
                 tmpGlobalContent = tmpGlobalContent.replace(oldFilename, filename)
             }
-                        
+
             extractedImages.push({
                 filename: filename,
                 // TODO - must be JSON serializable
                 data: base64ArrayBuffer(data)
             });
-            
+
             deferred.resolve();
         }
     });