Iframe onclick not working in Firefox and Opera

Question

I am trying to attach an onclick event to an iframe that is in editable mode using the JavaScript and HTML code below. The code works fine in IE8, Safari, and Chrome, but does not work in Firefox or Opera. I have spent several hours doing some research, rewriting the code, and testing every idea that I can think of, all without success. So far, I have only been able to work out that line 8 might be the root of my problem. Can anybody tell me what I may be doing wrong and offer me any tips or code samples to help solve my problem? Any help would be appreciated.

Here is my code;

<html>
<head>
<script type="text/javascript">
    function iFrameOn(){
        document.getElementById("wysiwyg").contentWindow.document.designMode = 'On';
    }
    function iFrameEvent(){
        document.getElementById("wysiwyg").contentWindow.document.body.onclick = function(){
            alert('Hello world!');
        }
    }
</script>
</head>
<body onload="iFrameOn()">
<iframe name="wysiwyg" id="wysiwyg" onload="iFrameEvent()"></iframe>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

I believe that contentWindow was a property that IE initally implemented that other browsers may have started supporting at some point but I believe the standard is contentDocument.

Someone here has posted a cross-browser solution:

Chrome: Getting iFrame and inserting into body

edited May 23 '17 at 11:56

Community

1
1

answered May 30 '12 at 18:20

jaywon

8,164
10
39
47

score 0 · Accepted Answer · answered May 30 '12 at 18:26

0

You must use contentWindow and contentDocument to support all browsers:

var frame = document.getElementById('wysiwyg');
if(frame.contentWindow) {
    //
} else if(frame.contentDocument) {
    //
}

answered May 30 '12 at 18:26

Matt K

6,620
3
38
60

I have just been using your answer, as well as my own solution or changing line 8 to 'document.getElementById('wysiwyg').contentDocument.onclick = function()', and visited the link provided by jaywon, but for some reason it is still not working in Opera and Firefox. – siberiantiger May 30 '12 at 18:48
to start, your `iFrameEvent()` will never fire because the iframe src is empty. `onload="iFrameEvent()"` will never happen. – Matt K May 30 '12 at 19:22
The iframe is not meant to have a src, and when I added a src, it still only worked in IE8, Safari, and Chrome. Finally, when I added an alert to the iFrameEvent() function, upon loading, an alert message appeared in all 5 browsers that I tested it in, including Firefox and Opera. – siberiantiger May 30 '12 at 19:43
well if you don't have a `src` for your iframe... how can you access the `body` of it to attach an event handler like `onclick`? – Matt K May 30 '12 at 20:40
I have already tried adding a src to the iframe, but the onclick event handler still does not work in Firefox or Opera. Also, if the iframe needs a src in order to attach an event handler to it, how come it works in IE8, Safari, and Chrome without a src? – siberiantiger May 31 '12 at 08:58
why do browsers do the things they do :P try this method: `document.getElementById("wysiwyg").contentDocument.addEventListener('click', function(event){alert('Hello, world!');}, false);` – Matt K May 31 '12 at 14:52

Iframe onclick not working in Firefox and Opera

2 Answers2