将当前 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);    }); });但它不起作用。这是示例小提琴：https://jsfiddle.net/py1tojmc/我在这里做错了什么？

Answer 1

是的，看起来按钮事件不会触发。但可能是跨源安全：

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

但这可能只是 jsfiddle，你能放一个alert('cmd button works');just 来确保你的按钮触发吗？

Answer 2

从我在打开 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);

    }); 

});