将当前 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 的开发控制台中看到的内容来看，我没有看到任何“事件”附加到您的下载按钮上。&nbsp;我不能告诉你为什么会发生这种情况（我不是那个专家），但也许调用以.contentWindow.document.body.innerHTML;某种方式将 DOM 上下文更改为 iframe（只是猜测），而且您似乎无法再访问按钮 ID #cmd。尝试像这样更改您的代码，看看它是否有效：$(document).ready(function() {&nbsp; &nbsp; $("#cmd").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; exportFile('new-file.html', $innerFrame.innerHTML);&nbsp; &nbsp; });&nbsp;});