How would I go about simulating a keypress within my editable iframe? (Same domain.)
The iframe has designmode on, and the body is being used as a text field for an RTE.
I have a feeling I need to use the trigger function from jquery, but I am unable to get it to work.
$('#editor body').trigger({type: 'keypress', which: 13, keyCode: 13});
EDIT: Apparently this isn't possible. Is there any way to make an iframe scroll to the cursor's position without pressing a key?
You can't do it with events. Events don't cause keypresses. Keypresses cause events.
WYSIWYG editors have an API that you can use to interact with the editor.
However, if you really need to fire events, then the problem can be broken down into two that already have answers:
how to fire an event in a document
how to access document of an iframe
Related
It's easy on any desktop browser. I just listen for keydown of document or window, and call preventDefault, as with the answers here and here.
I usually use something like this, so it's like ignoring all keyboard inputs:
window.addEventListener('keydown', function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}, true);
But they don't work on my Android tablet. (Tested on Chrome 63.0.3239.83 and Firefox 57.0.1 for Android)
Here is the typical scenario: I have an <input> focused as the current active element, and then I need some JavaScript to execute to freeze the user interface so all user inputs are ignored.
I wasted a lot of time on this issue and still cannot find a workaround for my Android tablet.
I considered some other ways, like changing focus to another element, or setting readOnly of the element to true. But there are caveats. Calling focus() triggers the onblur of the previously focused element. Setting readOnly does not prevent the event listeners of the focused element from firing (e.g. any keydown or keyup handlers for that <input>), and sometimes the enter key becomes a key that allows user to jump to the next input field on the page.
Is there a way to ignore all keyboard inputs on Chrome for Android without undesirable side effects?
At last I called window.addEventListener to attach the same handler (the function used in the question) for not only keydown, but also blur and focus, and then called document.documentElement.focus(). (Need to add tabindex="0" to <html>)
This avoids the problem of triggering onblur of the previously focused element, which is mentioned in the question.
(Note that blur and focus are not cancelable events, so handlers are only for stopping propagation here.)
I have an issue where a form is embedded in an iframe and after the form is submitted, the iframe is deleted from the DOM. Immediately after the form is deleted (the form was the last thing to have focus) I am unable to detect events that are bound to the root window element.
The frame is being loaded from a separate domain, although it does not matter for this example, it only matters that I have no control over the scripts on that page.
I understand that I cannot detect DOM events in the iframe, but all events are lost until the user clicks back on the DOM after iframe removal. This happens in both Firefox and Chrome. IE appears to return focus back to the original DOM as expected. I have not tested in other browsers.
$(window).keydown(function(e){
console.log (e.keyCode);
});
var $iframe = $("<iframe src='www.example.com'>");
$("body").append($iframe);
window.setTimeout(function(){
$iframe.remove();
}, 1000);
(The code above is just an example, i have included a working codepen to illustrate further- http://codepen.io/anon/pen/WQroqe)
To use the codepen -
Click the "click to load iframe button".
Make sure you click in the iframe so it has focus
After the iframe deletes, type anything and notice the DOM does not log your key strokes.
Click on the DOM and notice that your keystrokes are being logged properly.
Use Case: Form opens an iframe and submits, then removes itself from the DOM. I want to be able to detect keyboard events after the form is submitted without the user needing to use their mouse.
Question: I thought the top most DOM element was "window" and if this is not capturing the keyboard events, what is? There are no other DOMs currently present (i.e. iframes) as far as I know. I tested this is both firefox and chrome. Any explanation as to what is happening and why what I am trying to do is not possible or a way to capture the events would be greatly appreciated.
(My current solution is to use a MutationObserver to watch for the iframe to disappear and force focus back on the window. I also know I could use a setInterval to continually check for the iframe. Both solution feel like I am doing extra work).
after closing the iframe, focus the window using $(window).focus(); if you must
in the sample you'd do it like
$iframe.load(function(){
window.setTimeout(function(){
console.log("deleting");
$("#deleteMe iframe").remove();
$(window).focus(); // <======
}, 5000);
});
I am trying to put a keydown listener on my page. However, my page contains an iFrame, and the handler does not fire if I click inside the iFrame and push my key. I've tried various formulas from around the web to access the document inside the iFrame and put a listener on it, but it doesn't seem to work.
The content in the document is not from the same origin. It comes from a different domain from my website.
Can I listen for the keydown event? Or is that not possible?
Short answer: No.
Long answer (from my understanding): you can't listen to events such as key presses and so on because it would involve binding listeners to elements within the document, and if you had access to such elements then you could theoretically modify the contents of said document, which is undesirable if someone that does not own the content is embedding it on their page. That said, you can fire an onload event for the iframe or overlay a div using some CSS positioning that will have key listeners on them.
I need to learn how to right click on an element in a webpage using IE8 document mode.
The webpage I am working with is PTC's windchill 10, which I believe is created usings sencha's extjs. I am not sure if extjs registers the .click() method as a click always. Some elements I need to use onmousedown and onmouseup to get a click to work.
This function I have tested on the iframe object psbIFrame to do a regular .click() and it works using autohotkey.
Autohotkey Syntax
click_event:=window_handle.document.all.psbIFrame.contentWindow.document.createEventObject()
click_event.button:=1 ;left button down
links[a_index-1].fireEvent("onclick", click_event)
Javascript Type Syntax
document.all.psbIFrame.contentWindow.document.createEventObject();
click_event.button=1;
links[a_index-1].fireEvent("onclick", click_event)
I also have this working for other elements not in an iframe.
event:=document.createEventObject()
event.button:=1 ;left button down
element.fireEvent("onmousedown", event)
element.fireEvent("onmouseup", event)
Those are all left clicks since the document mode is ie8. When I set the button to 2 and do either of those I don't get anything happening.
Does anyone else have access to a windchill page that can help me test?
element.fireEvent("oncontextmenu")
This does what I expect a right click to do. With fireEvent you don't even need to initialize the event most times it seems. FireEvent will do that in the background assuming some defaults. I don't know if what I was doing in my question with changing the button to 2 even makes sense.
http://help.dottoro.com/ljvtddtm.php for fireEvent
http://help.dottoro.com/lagstsiq.php/#MouseEvent_Members for a list of mouse events
I'm working on a canvas-based game and am using window.addEventListener() to attach keyup and keydown events globally. This works in when viewing the page normally, but when embedding it as an iframe; it doesn't get the keyup and keydown events. Is there a better way I can do this?
You can't, not unless the frame has focus.
What you can do is make a keydown on the outer window focus the iframe, or always somehow focus the iframe, or focus the iframe by default (might be good enough, not sure what you're doing)
But for the window keydown to fire on any window (frame or not) that frame needs focus.
It seems you can just do var realWindow = window.parent || window; and use addEventListener on realWindow instead.