VPF::pasteHTML в iframe в Opera - Форум программистов

Atlete

Дата 8.1.2010, 10:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

столкнулся с такой задачей как вставка произвольного HTML кода в iframe.
Чтобы было сразу понятнее задача связанная с WYSIWYG-редактором.

есть такой код:

Код


var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById(iframe_id) : frames[iframe_id];
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;
var el=document.createElement('div');
el.innerHTML = 'hello world!';


if(!isGecko){
        // IE
        var rng = iDoc.selection.createRange();
        rng.pasteHTML(el.outerHTML);
    }else{
        // gecko
        iframe.contentWindow.getSelection().getRangeAt(0).insertNode(node);    
    }

Такой код работает во всех браузерах (проверял в ИЕ, Mozilla и Chrome) кроме Opera.

Я знаю что способ вставки HTML кода есть. Все что на гуглил показывало аналогичный пример.
Что я делаю не так?
Помогите найти решение.

Amphiluke

Дата 8.1.2010, 11:28 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Что-то как будто много лишнего…

Код


var ifrWnd = document.getElementById(iframe_id).contentWindow;
var el = ifrWnd.document.createElement("div");
el.innerHTML = "hello world!";
ifrWnd.document.getElementsByTagName("body")[0].appendChild(el);

Atlete

Дата 8.1.2010, 12:05 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

если сделать appendChild то HTML добавиться в конец.
А суть в WYSIWYG редакторе добавлять именно там где стоит курсор.
Так что указанный вами метод не подойдет.

Amphiluke

Дата 8.1.2010, 13:15 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Метод pasteHTML() понимает только IE. Opera — нет. Поэтому пересмотрите свою методику определения браузера. Opera будет нормально выполнять то, что что вы прописали для Gecko. Поэтому лучше сделать прооверку:

Код


если (IE) то {
   вставка ч/з pasteHTML()
} иначе {
   вставка ч/з insertNode()
}

Добавлено через 10 минут и 56 секунд

Код


function pasteDiv() {
    var notIE = (window.addEventListener) ? true : false;
    var ifrWnd = document.getElementById(iframe_id).contentWindow;
    var iDoc = ifrWnd.document;
    var el = iDoc.createElement("div");
    el.innerHTML = "hello world!";
    if (notIE) {
        ifrWnd.getSelection().getRangeAt(0).insertNode(el);
    } else {
        var rng = iDoc.selection.createRange();
        rng.pasteHTML(el.outerHTML);
    }
}

Atlete

Дата 8.1.2010, 13:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

к сожалению это не так.

пробуем сделать так

Код


...
alert(iframe.contentWindow.getSelection());
...

результат undefined

но если сделать так:

Код


...
alert(iDoc.selection);
...

объект есть.
Получается для ИЕ и Оперы надо использовать одинаковый метод.
Но у обекта Range (CreateRange() ) в ИЕ гораздо больше методов, чем в Опере.

Не хочется делать все через реплейсы...как то не интересно получается (((.

Amphiluke

Дата 8.1.2010, 13:34 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Я привел вам рабочий код в предыдущем сообщении.

Код


alert(ifrWnd.getSelection());

в Opera показывает что требуется. Никаких undefined.

Atlete

Дата 8.1.2010, 13:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

Огромное спасибо. Верхний пост не видел.
Вставляется HTML.

Amphiluke

Дата 8.1.2010, 13:51 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

В вашем коде isGecko = false в случае Opera, и поэтому iframe определяется через коллекцию frames, как для IE, а не через getElementById. Но возвращаемый таким образом объект окна не имеет свойства contentWindow (оно возвращается как undefined), поэтому и метод getSelection() в этом случае у вас не определяется в Opera.

Ой, не успел… =)

Это сообщение отредактировал(а) Amphiluke - 8.1.2010, 13:51

Atlete

Дата 8.1.2010, 14:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

Я уже разобрался по Вашему коду. Большое спасибо за оказанную помощь еще раз.
К сожалению не могу плюсануть - не хватает еще кол-в сообщений.

Frozen_Coyote

Дата 6.2.2011, 12:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 230
Регистрация: 20.9.2007

Репутация: нет
Всего: нет

Цитата(Atlete @ 8.1.2010, 14:06)

А не подскажете, как модифицировать код для Оперы, чтобы вставка происходила не в место, где курсор стоит, а замещая выделенный текст или объект?

спасибо!

Amphiluke

Дата 6.2.2011, 16:19 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Для браузеров, кроме Opera, можно перед вставкой элемента вызывать метод deleteFromDocument() объекта Selection (а для IE — метод clear()). В Opera такой «фокус» не проходит. Для нее уже до нас придумали обходные пути.

Похоже, эти обходные пути уже тоже не работают... smile

Это сообщение отредактировал(а) Amphiluke - 6.2.2011, 16:44

Amphiluke

Дата 6.2.2011, 17:07 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Придумал для Opera другой обходной путь. Довольно извращенный, но рабочий. smile

Код


function pasteDiv(iframe_id) {
    var notIE = (window.addEventListener) ? true : false;
    var ifrWnd = document.getElementById(iframe_id).contentWindow;
    var iDoc = ifrWnd.document;
    var el = iDoc.createElement("div");
    el.innerHTML = "hello world!";
    if (notIE) {
        var sel = ifrWnd.getSelection();
        sel.deleteFromDocument();
        if (!ifrWnd.getSelection().isCollapsed) { // Opera, it's specially for you
            var tmpspan = iDoc.createElement("span");
            ifrWnd.getSelection().getRangeAt(0).surroundContents(tmpspan);
            tmpspan.parentNode.removeChild(tmpspan);
        }
        ifrWnd.getSelection().getRangeAt(0).insertNode(el);
    } else {
        var rng = iDoc.selection.createRange();
        rng.pasteHTML(el.outerHTML);
    }
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »