将当前 iframe 内容导出为 HTML 文件

Question

Here is the thing - I'm trying to create kind of email signature generator. Most of the index file, is a pure HTML code + tiny javascript. Inside index file I'm embeding email signature template as an iframe/email_signature.html file. So it looks as follows:

<iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="testing" name="emailSignature"></iframe>

Then I'm trying to download current content of this iframe by executing this code:

$(document).ready(function() {
        const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
    $("#cmd").click(function(){
        exportFile('new-file.html', $innerFrame.innerHTML);
    }); 
});

but it doesn't work. Here is the example fiddle:

https://jsfiddle.net/py1tojmc/

What I'm doing wrong here?

Answer 1

From what I can see in the dev console opening your jsfiddle, i don't see any "event" attached to your download button.

I can't tell you why this is happening (I'm not that expert), but maybe the call to .contentWindow.document.body.innerHTML; is somehow changing the DOM context to the iframe (just a guess), and it seems you cannot access the button id #cmd anymore.

Try changing your code like this ans see if it works:

$(document).ready(function() {
    $("#cmd").click(function(){
        const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
        exportFile('new-file.html', $innerFrame.innerHTML);
    }); 
});

Answer 2

Yeah looks like the button event won't fire. But could be cross origin security:

SecurityError: Permission denied to access property "document" on cross-origin object

But that could just be the jsfiddle, can you put an alert('cmd button works'); just to make sure your button fires?