I have some keyboard shortcuts binded to the document object using the keydown event (I am using the jquery.hotkeys plugin to do this, but I doubt this matters).
I then have an iframe which I insert dynamically into the DOM and after some actions remove it. My problem is that after removing the iframe, I need to click back on the parent document in order to be able to use the keyboard shortcuts, otherwise the keydown events are not detected.
I have tried using .focus(), .click(), .mousedown() etc on the document element as well as on other elements on the parent page, but I could not get the focus back to the parent page.
How can I get the focus back to the page without requiring the user to click on the page?
Thanks!!
if you have an iframe that is contained in the document you can store the "main" document as a variable prior to creating the iframe.
Then when you remove the iframe just call top.doc.focus() or top.doc.getElement('id').focus().
I just spent a while struggling with a similar issue, and what I've concluded is that the script running in the child frame keeps stealing focus back to that frame. Then when the script terminates, the child frame has already been removed, so the browser doesn't know where to focus anymore.
How I solved this was to create a function in the parent (or top) frame, that first removes the child frame, and then restores focus to itself. Now, from the child frame, I simply call the parent's function, and that fixes it.
Example:
outer.html:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body>
Outer content - press [Enter] to load the iframe
<div id="iframeHolder"></div>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script>
// Create a function for the child frame to call
function regainFocus(){
$('iframeHolder').update('');
window.focus();
}
// When the outer document loads, start handling keystrokes
Event.observe(window, 'load', function(){ Event.observe(window, 'keyup', function(e){
// Catch only the Enter key
if((e.which||window.event.keyCode) != Event.KEY_RETURN) return;
// Construct the iframe, set its src, add it to holder, and focus on it
var frame = $(document.createElement('iframe'));
frame.setAttribute('src', 'inner.html');
frame.observe('load', function(){ this.contentWindow.focus(); });
$('iframeHolder').appendChild(frame);
});});
</script>
</body></html>
inner.html:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /></head><body>
Inner content - press [Esc] to close the iframe
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script>
// When the inner document loads, start handling keystrokes
Event.observe(window, 'load', function(){ Event.observe(window, 'keyup', function(e){
// Catch only the Esc key
if((e.which||window.event.keyCode) != Event.KEY_ESC) return;
// Call the parent's function
parent.regainFocus();
});});
</script>
</body></html>
Related
in my program I generate buttons inside an HTML table each with the same onClick.listen listener defined.
In the listener, MouseEvent event.toElement is null.
The table is pre-created in HTML, but the table rows, row cells and buttons in the cells are all generated in dart.
How come event.toElement can be null?
If I try a clean sample app (new web application in dart editor) and create a button, add that to a div, then event.toElement is not null.
So I have a general question: when listening to the onClick event of a button, then receiving the MouseEvent, what can cause the MouseEvent's toElement property to be null?
I am running this in a browser (chrome and firefox) after compiling to JS.
EDIT:
In the HTML file I linked the compiled JS script directly.
Now I changed to link the dart script and the pakcages/browser/dart.js (as in sameple dart web apps). After this change, it works fine (event.toElement != null) in chromium and chrome, but not in firefox. Firefox still has event.toElement == null
What to do??
CODE:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="sample_container_id">
<p id="sample_text_id"></p>
</div>
<script type="application/dart" src="button_event.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
DART:
import 'dart:html';
void main() {
ButtonElement b = new ButtonElement();
b.text = 'Press Me';
b.id = 'button_id';
b.onClick.listen(onMarketButtonClick);
querySelector('#sample_container_id').append(b);
}
void onMarketButtonClick(MouseEvent _event) {
querySelector('#sample_text_id').text = _event.toElement.toString();
}
RESULT:
In Chrome, clicking the button outputs 'button'
In FireFox, clicking the button outputs 'null'
USE CASE:
In the call back (onMarketButtonClick), I want to retrieve the button id and custom attributes of the button that was clicked, such that I can identify which button was clicked.
Imagine a calculator app. Buttons of different numbers have different inner-html's and different custom attributes and/or ids. But all have the same onClick listener.
When the listener is called, I need to identify which number was clicked. So I need access to the ButtonElement and its custom attributes and id and inner html etc.
(custom attributes for more complex use cases than the calculator)
Thanks a lot,
Imran
The Firefox property is called relatedEvent. Use that, and you won't get null.
I'm still not sure of the use case, but depending on what information you wanted, you could probably just use currentTarget or target:
querySelector('#sample_text_id').text = _event.currentTarget.toString();
querySelector('#sample_text_id').text = _event.target.toString();
You can basically use EventTarget target property of MouseEvent (link). Here is a basic example:
import "dart:html";
void main() {
document.body.append(new ButtonElement()..text="btn1"..id="btn1");
document.body.append(new ButtonElement()..text="btn2"..id="btn2");
document.onClick.listen((MouseEvent e) => (print(e.target.id)));
}
Whenever, mouse clicks you can check the type of target, which is button for your case. Then, you can do whatever you want with it.
Is is possible to refresh only once iframe parent page when iframe contain specified div id ?
I tried this on parent page but didn't work :
if document.frames('myiframe').(document.getElementById("iframedivID") !== null) { window.location.href = "mysite.com"; }
It is taking time to load the inner document. So we have to wait till inner document gets loaded and once it is loaded, the inner div can be accessed. Here is my example HTML and javascript code. Due to this, for the first time, you may get null in the alert. Hope this helps.
Test.html
<iframe id="iframedivID" src="Test1.html"></iframe>
Test1.html
<div id='myDiv'>My name is ravindra</div>
<script type="text/javascript">
if (window.parent.window.location.href.toString().indexOf("?refresh") == -1){
window.parent.window.location.href="Test.html?refresh";
}
</script>
I am using 'uxiframe' component to load a separate application into a modal window (ExtJS4.1x).
Cross domain issues clearly do not allow me to access any part of the IFrame contents. However same domain app's Document in the IFrame is accessible from the parent via iframe.getDoc()
The question is this: Is there a way for me to setup DOM listeners on the elements inside the IFrame from the parent modal window?
Thanks and a simple example would be appreciated.
Update Thanks to #lontiviero for a tip to get me started. Here is what I ended up with:
var bodyEl=Ext.get(iframe.getDoc().body); //this gives me an Ext.dom.Element object
bodyEl.on('click',
function(event, el,opts){
console.log("<p> clicked");
},
this, //scope
{delegate:'p'} //options
);
With this code i was able to attach an event to the iframe´s body element.
Ext.EventManager.on(iframe.contentDocument.body, 'mouseover', function() {
alert('hello');
});
Take a look at it in jsfiddle: http://jsfiddle.net/XApQU/
Suppose we have the following HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test iframe download</title>
<script type="text/javascript">
var init = 0;
function download() {
document.getElementById("dload_frame").src = "http://example.com/dload.py";
}
function alert() {
if (init == 0) {
init = 1;
}
else {
document.getElementById("alert_span").innerHTML = "Got it!";
}
}
</script>
</head>
<body>
<span id="alert_span">Main content.</span><br/>
<input type="button" value="Download" id="btn" onclick="download()" />
<iframe id="dload_frame" src="http://404.com/404" onload="alert()"> </iframe>
</body>
</html>
Now, if the URL to which iframe's src is being rewritten to (in this case - "http://example.com/dload.py") returns HTML, no problem: the onload event fires, the span's contents are replaced, everybody's happy.
However, if the content type of the file returned by the URL is set to something that forces the browser to open the save file dialog, the iframe's onload event never fires.
Is there any workaround? Using iframes isn't necessary, the desired behavior is to launch a callback after the browser begins downloading the supplied file.
I have encountered the same problem as this:
Here is my work-around, please see if it works for you:
<script>
function download(){
var url = 'http://example.com/dload.py';
var htm = '<iframe src="' + url +'" onload="downloadComplete()"></iframe>';
document.getElementById('frameDiv').innerHTML = htm;
}
</script>
<div style="display:none" id="frameDiv">
</div>
<button onclick="download()">download file</button>
As far as I can remembered iframe's onload event fires only once.
Setting another value for src attribute will not cause the onload event to fire again.
I have the same problem, onLoad handler is only fire when the content change. If you download a file. If you delete HTTP header to print file content on iframe, the onload is correctly fire.
My solution after many different approaches to get this working across ff ie safari and chrome was not have a 2 step download.
the original JS request to create an iframe loads a src that would normally have loaded the pdf
However, the src now loads a page with yet another iframe inside of it, which now contains the url of the pdf.
in the html response I trigger the onload and also a catchall setTimeout funciton which calls my response on window.parent.window.handlerfunction which my onload on the top iframe would have been. The result is a PDF download and a trigger on the top level parent of the handler function that works across the browsers since it no longer relies on detecting an actual iframe load but rather relies on supported parent/child window relationships.
hope this helps someone who was also stuck
You can check iframe readyState property repeatedly after short time intervals until it gets completed.
function iframe_onload(iframe_id, js) {
var iframe = document.getElementById(iframe_id);
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.readyState == 'complete') {
eval(js)
return;
}
window.setTimeout('iframe_onload("' + iframe_id + '",`' + js + '`);', 100);
}
You might need help of jquery for this, for instance you can do this:
$.get('http://example.com/dload.py',{},function(result){
$('alert_span').html(result);//or some content
});
I need to pass 4 arguments (3 strings and one comma separated list) from an ASP.NET page to another ASP.NET page using jQuery. The destination page ought to be launched as a separate window, which works fine with the following jQuery snippet:
$('#sourcePageBtn').click(function(){
window.open("destinationPage.aspx");
return false;
});
How can I pass the arguments to the destination page? I am trying to avoid the query string to pass the arguments because:
I don't want to show the url arguments (which can also be very long) in the destination window.
There are some special characters like ',/,\, & etc. in the string arguments.
Please suggest.
Edit:
I'm trying to access the arguments in the script section of the aspx file i.e.
<script language="C#" runat="server">
protected void Page_Load ( object src, EventArgs e)
{
//Creating dynamic asp controls here
}
</script>
My specific need for the arguments in the Page_Load of the script section stems from the fact that I am creating a few dynamic Chart controls in the Page_Load which depend on these arguments.
cheers
Initial Thoughts (before solution created)
Use POST for large data instead of GET. With POST no querystring will be used for data and therefore URL length restriction isn't a concern. (The max URL length differs between browsers so you're right to stay away from it when large data is moving).
Special URL characters can be encoded to be passed in the query string so that shouldn't be an issue.
Alternatively you might store the data on the server side from the first page, and have the second page pick it up from the server side. But this is overkill. And it makes you do unneeded server programming.
Passing state via HTTP calls is standard practice. You shouldn't try to circumvent it. Work with it. All the facilities are built in for you. Now it's just up to jQuery to provide us some help...
Note: Be careful using jQuery for main app features in case JavaScript is disabled in the browser. In most cases your web application should be usable at a basic level even when JavaScript is disabled. After that's working, layer on JavaScript/jQuery to make the experience even better, even awesome.
Edit: Solution (with ASP.NET processing)
Key resources for solution implementation are:
How use POST from jQuery - initiates the request, passes arguments, gets response
jQuery context argument - this is how the popup window DOM is accessed/affected from the main window
How it works: From a main page, a POST occurs and results are displayed in a popup window. It happens in this order:
The main script opens a popup window (if it doesn't already exist)
main script waits for popup window to fully initialize
main script POSTs (using AJAX) arguments to another page (sends a request)
main script receives response and displays it in the popup window.
Effectively we have posted data to a popup window and passed arguments to the processing.
Three pages follow and they constitute the complete solution. I had all 3 sitting on my desktop and it works in Google Chrome stable version 3.0.195.38. Other browsers untested. You'll also need jquery-1.3.2.js sitting in the same folder.
main_page.html
This is the expansion of the logic you provided. Sample uses a link instead of a form button, but it has the same id=sourcePageBtn.
This sample passes two key/value pairs when the POST occurs (just for example). You will pass key/value pairs of your choice in this place.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<a id="sourcePageBtn" href="javascript:void(0);">click to launch popup window</a>
<script>
$(function() {
$('#sourcePageBtn').click( function() {
// Open popup window if not already open, and store its handle into jQuery data.
($(window).data('popup') && !$(window).data('popup').closed)
|| $(window).data('popup', window.open('popup.html','MyPopupWin'));
// Reference the popup window handle.
var wndPop = $(window).data('popup');
// Waits until popup is loaded and ready, then starts using it
(waitAndPost = function() {
// If popup not loaded, Wait for 200 more milliseconds before retrying
if (!wndPop || !wndPop['ready'])
setTimeout(waitAndPost, 200);
else {
// Logic to post (pass args) and display result in popup window...
// POST args name=John, time=2pm to the process.aspx page...
$.post('process.aspx', { name: "John", time: "2pm" }, function(data) {
// and display the response in the popup window <P> element.
$('p',wndPop.document).html(data);
});
}
})(); //First call to the waitAndPost() function.
});
});
</script>
</body>
</html>
popup.html
This is the popup window that is targeted from the main page. You'll see a reference to popup.html in the jQuery script back in the main page.
There's a "trick" here to set window['ready'] = true when the popup window DOM is finally loaded. The main script keeps checking and waiting until this popup is ready.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<!-- The example P element to display HTTP response inside -->
<p>page is loaded</p>
</body>
<script>
$(function() {
window['ready'] = true;
});
</script>
</html>
process.aspx.cs (C# - ASP.NET process.aspx page)
The dynamic server page the arguments are POSTed to by the main page script.
The AJAX arguments arrive in the Page.Request collection.
The output is delivered back as plain text for this example, but you can customize the response for your apps requirements.
public partial class process : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
// Access "name" argument.
string strName = Request["name"] ?? "(no name)";
// Access "time" argument.
string strTime = Request["time"] ?? "(no time)";
Response.ContentType = "text/plain";
Response.Write(string.Format("{0} arrives at {1}", strName, strTime));
}
protected override void Render(System.Web.UI.HtmlTextWriter writer) {
// Just to suppress Page from outputting extraneous HTML tags.
//base.Render(writer); //don't run.
}
}
Results of this are displayed into the popup window by the original/main page.
So the contents of the popup window are overwritten with "[name] arrives at [time]"
Main References: HTTP Made Really Easy, jQuery Ajax members and examples.
If you keep a reference to the new window when you open it, ie var destWin = window.open(...) then you can access the variables and methods on the destWin window object. Alternatively you can "reach back" from the destination window with window.opener.