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

Question

事情是这样的 - 我正在尝试创建一种电子邮件签名生成器。大部分索引文件，是纯HTML代码+微小的javascript。在索引文件内部，我将电子邮件签名模板嵌入为 iframe/email_signature.html 文件。所以它看起来如下:

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

然后我尝试通过执行以下代码来下载此 iframe 的当前内容:

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

但它不起作用。这是 fiddle 示例:

https://jsfiddle.net/py1tojmc/

我在这里做错了什么？

Answer 1

从我在打开 jsfiddle 的开发控制台中看到的内容，我没有看到任何附加到您的下载按钮的“事件”。

我无法告诉你为什么会发生这种情况(我不是那么专家)，但也许调用 .contentWindow.document.body.innerHTML; 会以某种方式将 DOM 上下文更改为iframe(只是猜测)，看来您无法再访问按钮 id #cmd 了。

尝试像这样更改您的代码，看看它是否有效:

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