Home/ Questions/Q 1046715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:11:24+00:00

i have a strange problem only in Chrome using an iframe but working in

  • 0

i have a strange problem only in Chrome using an iframe but working in all others common browser.

the problem: If i type in the IFRAME and then press the button to send, it work fine, the focus back to the IFRAME and the cursor BLINK.

But if i type and then press ENTER to invoke the event handler function, the focus back but the cursor disappear. And then if you go in another window and then back the cursor appear. This happen only in Chrome. I did the example page to show the problem in action. Click the link below to see.

UPDATE: I added the code also here below

    var editorFrame = 'myEditor'

function addFrame() {

    var newFrame = new Element('iframe', {
        width: '520', 
        height: '100',
        id: editorFrame,
        name: editorFrame,
        src: 'blank.asp',
        class: 'myClass'
    });

    $('myArea').appendChild(newFrame);

    window.iframeLoaded = function() {
        // this is call-back from the iframe to be sure that is loaded, so can safety attach the event handler

        var iframeDoc, UNDEF = "undefined";
        if (typeof newFrame.contentDocument != UNDEF) {
            iframeDoc = newFrame.contentDocument;
        } else if (typeof newFrame.contentWindow != UNDEF) {
            iframeDoc = newFrame.contentWindow.document;
        }
        if (typeof iframeDoc.addEventListener != UNDEF) {
            iframeDoc.addEventListener('keydown', keyHandler, false);
        } else if (typeof iframeDoc.attachEvent != UNDEF) {
            iframeDoc.attachEvent('onkeydown', keyHandler);  
        }
    };
}

function resetContent() 
{   
    var myIFrame = $(editorFrame);

    if (myIFrame) myIFrame.contentWindow.document.body.innerHTML='';
}

function setEditFocus() 
{

    var iFrame = document.frames ? document.frames[editorFrame] : $(editorFrame);
    var ifWin = iFrame .contentWindow || iFrame;

    ifWin.focus();

}

function send()
{
    resetContent();
    setEditFocus(); 
}

function keyHandler (evt) {

    var myKey=(evt.which || evt.charCode || evt.keyCode)

    if (myKey==13)  {

        if (!evt) var evt = window.event;

        evt.returnValue = false;

        if (Prototype.Browser.IE) evt.keyCode = 0;

        evt.cancelBubble = true;

        if (evt.stopPropagation) evt.stopPropagation();

        if (evt.preventDefault) evt.preventDefault();

        send();

    }
}

In the HTML page

<body onload="addFrame()">

<div id="myArea"></div>
<input id="myButton" type="button" value="click me to send [case 1]" onclick="send()">

To make more easy to understand the problem i’ve create a specific page to reproduce the problem with full example and source included.

You can view here by using Google Chrome:
example of the problem

I really need your help because i tried to solve this problem for many days with no luck. And all the suggestions, tips and workaround are well accepted.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not really sure what the cause of the issue is, as there are times where Chrome will give focus to the element correctly, though most of the time it does not. You shouldn’t need to request focus at all, since the focus is not lost when you press the key. If you omit the setEditFocus() call, you should notice that it still works correctly in everything but Chrome, which apparently gets offended that you’ve removed all of the content in the body.

    When you set contenteditable, every browser sets the innerHTML of the iframe document’s body element to be something different:

    Browser           | innerHTML
-----------------------------
Internet Explorer | ''
Opera             | '<br>\n'
Firefox           | '<br>'
Chrome/Safari     | '\n'

    If you’re not expecting to see that extra stuff when you parse the content later, you might want to remove it upfront in addFrame().

    I was able to “fix” the problem by doing the following:

    First, update the event handler so we can return false in it and prevent Opera from generating HTML for fun when we call getSelection() later…

    function addFrame() {
    ...
    window.iframeloaded = function() {
       ...
       if (typeof iframeDoc.addEventListener != UNDEF) {
           iframeDoc.addEventListener('keypress', keyHandler, false);
       } else if (typeof iframeDoc.attachEvent != UNDEF) {
           iframeDoc.attachEvent('onkeypress', keyHandler);
       }
    }
}

    Edit: Removed original function in favour of the new one included below

    Finally, return false from the key press handler to fix the Opera issue mentioned above.

    function keyHandler (evt) {
    var myKey=(evt.which || evt.charCode || evt.keyCode)

    if (myKey==13) {
        ...
        return false;
    }
}

    I had originally done what syockit suggested, but I found it was doing weird things with the caret size in Chrome, which this method seems to avoid (although Firefox is still a bit off…). If you don’t care about that, setting the innerHTML to be non-blank is likely an easier solution.

    Also note that you should be using className instead of class in the object you pass to new Element(), since IE seems to consider it a reserved word and says that it’s a syntax error.

    Edit: After playing around with it, the following function seems to work reliably in IE8/Firefox/Chrome/Safari/Opera for your more advanced test case. Unfortunately, I did have to include Prototype’s browser detection to account for Opera, since while everything looks the same as far as the JavaScript is concerned, the actual behaviour requires different code that conflicts with the other browsers, and I wasn’t able to find a better way to differentiate between them.

    Here’s the new function, which focuses on the editable content of the iframe, and makes sure that if there is already content in there, that the caret is moved to the end of that content:

    function focusEditableFrame(frame) {
    if (!frame)
        return;

    if (frame.contentWindow)
        frame = frame.contentWindow;

    if (!Prototype.Browser.Opera) {
        frame.focus();

        if (frame.getSelection) {
            if (frame.document.body.innerHTML == '')
                frame.getSelection().extend(frame.document.body, 0);
            else
                frame.getSelection().collapseToEnd();
        } else if (frame.document.body.createTextRange) {
            var range = frame.document.body.createTextRange();

            range.moveEnd('character', frame.document.body.innerHTML.length);
            range.collapse(false);
            range.select();
        }
    } else {
        frame.document.body.blur();
        frame.document.body.focus();
    }
}

    Updated setEditFocus() (Not really necessary now, but since you already have it):

    function setEditFocus()
{
    focusEditableFrame($(editorFrame));
}
    • 0