2009-09-24 3 views
5

Пример ниже - простой пример iframe, который использует window.parent. [Turn designmode on] (это работает). В FF все хорошо, но в IE8 (неожиданное удивление) любой сделанный выбор теряется, когда вы выходите из iframe. Это полностью отрицает использование инструментов вне iframe. Я не могу найти решение через 4 дня ...IE8 iframe DesignMode теряет выбор

Открыть в IE8 http://www.chromedigital.co.za/hydrapage/test.htm

+0

Вы делаете это неправильно. Попробуйте эту демонстрацию «contenteditable» в своем IE8: http://www.quirksmode.org/dom/execCommand/ Он также использует iframe для редактируемого региона, и со всех учетных записей он отлично работает. –

+0

Я не понимаю. Хотя я не убежден кодом для установки designMode в исходном вопросе, демонстрация, которую вы связали, демонстрирует точно такое же поведение с выборами, о которых спрашивает этот вопрос. –

+0

@ Тит: У меня нет IE8, но у меня есть IE7, и демо определенно делает * не * теряют выбор при взаимодействии с верхними кнопками. Джонни, возможно, нашел законную ошибку в IE8. @ Джонни, ты еще пробовал демо? –

ответ

12

На любом элементе в основном документе, который вы хотите не чтобы разбить выбор iframe, добавьте unselectable="on".

Например:

<div onclick="makeBold()" unselectable="on">Bold</div> 
+0

Спасибо за это - интересно, зачем это нужно делать ... –

+0

Я был РАСПРОСТРАНЕН этим выпуском с тех пор, как вышел IE8. Это удивительная находка для меня. Тим, я люблю тебя. – jerebear

+0

Отличная поисковую подсказку: Tim – SW4

3

Вы можете попробовать сохранить выбор, когда IFrame теряет фокус. Если вы уверены, что содержимое iframe не изменится, прежде чем пользователь снова сосредоточится на нем, вы можете сохранить выбранные в данный момент Range или TextRange. Следующий сценарий (для главной страницы) включает в свой оригинальный сценарий, не тщательно протестирован и будет улучшен с лучшим обнаружением особенностей, но это что-то, чтобы работать с:

h_FF=!document.all 
h_rt_F=0 

function HLC_DM() 
{ 
h_rt_F=document.getElementById("moo").contentWindow 
if(h_FF) 
{ 
    if(h_rt_F.document.designMode!="on") 
    { 
    try 
    { 
    h_rt_F.document.designMode="on" 
    h_rt_F.document.execCommand("redo",false,null) 
    createEventHandlers(); 
    } 
    catch(e) 
    { 
    setTimeout("HLC_DM",200) 
    return false 
    } 
    } 
} 
else 
    h_rt_F.document.body.contentEditable=true 
    createEventHandlers(); 
} 


function getContentWindow() { 
return document.getElementById("moo").contentWindow; 
} 

function saveSelection() { 
var win = getContentWindow(); 
var doc = win.document; 
var sel = win.getSelection ? win.getSelection() : doc.selection; 
var range; 

if (sel) { 
    if (sel.createRange) { 
    range = sel.createRange(); 
    } else if (sel.getRangeAt) { 
    range = sel.getRangeAt(0); 
    } else if (sel.anchorNode && sel.focusNode && doc.createRange) { 
    // Older WebKit browsers 
    range = doc.createRange(); 
    range.setStart(sel.anchorNode, sel.anchorOffset); 
    range.setEnd(sel.focusNode, sel.focusOffset); 

    // Handle the case when the selection was selected backwards (from the end to the start in the 
    // document) 
    if (range.collapsed !== sel.isCollapsed) { 
    range.setStart(sel.focusNode, sel.focusOffset); 
    range.setEnd(sel.anchorNode, sel.anchorOffset); 
    } 
    } 
} 
return range; 
} 

function restoreSelection(range) { 
var win = getContentWindow(); 
var doc = win.document; 
var sel = win.getSelection ? win.getSelection() : doc.selection; 

if (sel && range) { 
    if (range.select) { 
    range.select(); 
    } else if (sel.removeAllRanges && sel.addRange) { 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    } 
} 
} 

var selectedRange; 

function blurHandler() { 
selectedRange = saveSelection(); 
} 

function focusHandler() { 
if (selectedRange) { 
    restoreSelection(selectedRange); 
} 
} 

var iframeHandlersCreated = false; 
function createEventHandlers() { 
// Prevent setting up twice 
if (!iframeHandlersCreated) { 
    var iframe = document.getElementById("moo"); 
    var doc; 
    if (iframe.contentDocument && iframe.contentDocument.addEventListener) { 
    doc = iframe.contentDocument; 
    doc.addEventListener("blur", blurHandler, false); 
    doc.addEventListener("focus", focusHandler, false); 
    } else if (iframe.attachEvent) { 
    iframe.attachEvent("onbeforedeactivate", blurHandler); 
    iframe.attachEvent("onfocus", focusHandler); 
    } 
    iframeHandlersCreated = true; 
} 
} 
+1

Как, черт возьми, это было опущено? Мало того, что он полностью отвечает на вопрос, это довольно привлекательный ответ, который приложил определенные усилия для написания. –

+0

Привет Тим ​​- спасибо за ваше усилие здесь - демо, которое я предоставил, должно было указывать на потерю выбора только - настоящий код хранит и обрабатывает диапазон - однако, я хочу определить, является ли это ошибкой или естественным поведением в ie8 ,Если это не ошибка, то плохо используйте свой код (но его позор, чтобы иметь все эти дополнительные накладные расходы, чтобы поддерживать выбор) - я могу просто ограничить редактирование для gecko. т.е. удары –

+0

Im disecting demo crescentfresh предоставлено. Mabe там есть решение - эти кнопки не убивают выбор - Ill update on my find ... –

0

Мои Editbox могут добавлять изображения, таблицы и т.д., где вы в последний раз кликали в IFRAME и работает для IE6, IE7 и FF, но для ie8 он добавляет то в самом начале. Затем их можно вырезать и вставлять туда, где вы хотите, но это неприятно. Более серьезным является то, что когда я хочу изменить атрибуты ячейки таблицы, например, у меня должен быть некоторый текст в ячейке, который я должен выделить, или я не могу определить, в каком элементе я вхожу!

У Microsoft исправления ошибок для метода выбора или Firefox или старые версии, т.е. единственный курс?

приветствует Майк W

+0

Вы можете задать нам вопрос. –

Смежные вопросы