Выделение текста в IFrame

Question

Выделение текста в IFrame

Я пытаюсь создать конструктор подписей электронной почты с использованием HTML, CSS и Javascript. В настоящее время I состоит из формы, в которую пользователь вводит свои данные, и кнопки для создания подписи.

Когда кнопка нажата, я должен JS нажать детали, которые пользователь ввел в шаблон HTML, а затем отобразить содержимое в IFrame на той же странице. Я решил использовать IFrame, чтобы стиль подписи был отделен от стиля, используемого для конструктора страница.

Теперь, чтобы упростить работу пользователя, я хотел бы добавить кнопку, которая выделяет содержимое IFrame, а затем копирует его в буфер обмена, чтобы пользователь мог вставить его в свою подпись электронной почты Outlook.

Я искал, и этот Ответ кажется довольно популярным, но я не могу выделить содержимое IFrame. Есть идеи, что я должен сделать, чтобы это сработало?

531 2

jQuery javascript html

2 ответов:

Comments

Ничего не найдено.

user3333134 · Accepted Answer · 2015-10-23 06:43:20

Вот JSFiddle выделения текста в iframe.
Он не может скопировать содержимое iframe, но должен помочь вам начать работу. Если пользователь нажимает на iframe, он может скопировать содержимое. Если я выясню, как скопировать содержимое без необходимости нажимать iframe, я дам вам знать . Вы можете просто вытащить текст из iframe и поместить его во временную скрытую форму в текущем doc, но это кажется беспорядочным обход.
Https://jsfiddle.net/adio01/77LgnyLt/
$(document).ready(function() {
  $('#iframe').contents().find('body').html('<textarea class="highLight">Highlight Me</textarea>');

  $('#click').click(function() {
    var iframe = $('#iframe');
    $('.highlight', iframe.contents()).select();
   });
});

Rossco · Accepted Answer · 2015-10-27 21:44:06

Мне удалось выяснить, что я хочу сделать. Большое спасибо user3333134 за то, что помог мне встать на правильный путь.

Вотскрипка , демонстрирующая поведение, которое я искал. В основном, в iframe есть некоторый html-контент, который я хочу скопировать, как если бы пользователь выбрал его с помощью мыши, а затем скопировать его в буфер обмена.
$(document).ready(function () {
    $('#iframe').contents().find('body').html('<p>Line 1</p><p>Line 2</p>');

    $('#click').click(function () {
        var iframe = $('#iframe')[0];

        var doc = iframe.contentDocument;
        doc.execCommand('selectAll');

        try {
           var successful = doc.execCommand('copy');
           var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });
});