IE8 iframe DesignMode loses selection

前端 未结 3 1334
青春惊慌失措
青春惊慌失措 2021-01-05 18:28

The example below is a simple example of an iframe which uses window.parent.[turn designmode on] (this works). In FF all is well, but in IE8 (surprise surprise) any selectio

相关标签:
3条回答
  • 2021-01-05 18:52

    You could try saving the selection when the iframe loses focus. If you're sure the content of the iframe will not change before the user focuses on it again, you can store the currently selected Range or TextRange. The following script (for the main page) includes your original script, is not extensively tested and would be improved with better feature detection but is something to work with:

    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;
     }
    }
    
    0 讨论(0)
  • 2021-01-05 19:03

    My Editbox can add images, tables etc where you last clicked in the iframe and works for ie6, ie7 and FF but for ie8 it adds then at the start. They can then be cut and pasted to where you want them but that is a nuisance. MORE SERIOUS is that when I want to change the attributes of a table cell, for example, I have to have some text now in the cell which I must highlight or I can't determine what element I'm in!

    Have Microsoft any bug fixes for the selection method or is Firefox or old versions of ie the only course?

    regards Mike W

    0 讨论(0)
  • 2021-01-05 19:07

    On any element in the main document you want not to break the iframe selection, add unselectable="on".

    For example:

    <div onclick="makeBold()" unselectable="on">Bold</div>
    
    0 讨论(0)
提交回复
热议问题