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

Question

事情是这样的——我正在尝试创建一种 email 签名生成器。 大多数索引文件，是纯 HTML 代码 + 微小的 javascript。 在索引文件中，我将 email 签名模板作为 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

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

Answer 2

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

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

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