Экспорт текущего содержимого 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'); только для того, чтобы убедиться, что ваша кнопка срабатывает?

Answer 2

Из того, что я вижу в консоли разработчика, открывающей ваше jsfiddle, я не вижу никакого "события", прикрепленного к вашей кнопке загрузки.

Я не могу сказать вам, почему это происходит (я не такой эксперт), но, возможно, вызов .contentWindow.document.body.innerHTML; как-то меняет контекст DOM наiframe (только предположение), и кажется, что вы больше не можете получить доступ к идентификатору кнопки #cmd.

Попробуйте изменить свой код следующим образом и посмотрите, работает ли он:

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