Unable to select the text left in the Iframe beyon

问题:

I am using MVC3 and I have an Iframe in my page, and design mode for this Iframe is turned on for editing at run time. while running this in IE9, I am unable to select the text beyond the visible area of the Iframe. For example: if the first 7 lines are visible in my Iframe, then when I scroll to select the content in the 10th line, then the selection does not occur.

<iframe id="RFrame" runat="server" style="width: 900px;"></iframe>

<script type="text/javascript">

    Sys.Application.add_load(PageLoad);

    function PageLoad() {
        var frame = $get('<%=this.RFrame.ClientID%>');
        $get('<%=this.RFrame.ClientID%>').contentDocument.designMode = "on";
        frame.focus();
    }
</script>

Note: this works fine in all other browsers except IE9. issue occurs only when the document mode is set as IE9 by default for bowser mode IE9.

Can anyone let me know the reason for this behavior or how to resolve this?

回答1:

The problem you are facing is caused by setting designMode = "on"

To fix this issue do not set designMode = "on", instead set contentEditable = true.

Example:

var editor = document.getElementById("RFrame");
editorDoc = editor.contentWindow.document;          
var editorBody = editorDoc.body;
editorBody.contentEditable = true;

This will also remove the horizontal scrollbar from the IFRAME displayed by IE9 when compatibility mode is disabled.